欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS结构赋值、dom增删改查基本使用

程序员文章站 2022-01-18 10:05:48
...

结构赋值

  1. //es6结构赋值针对数组和对象,赋值到变量中。
  2. let user = ["小明","小白","小张"];
  3. let ming = user[0];
  4. let zhang = user[2];
  5. console.log(ming,zhang); //小明,小张

1.数组结构

  1. let [name,age,qq] = ["小明",18,123456]; //模板=数组值
  2. console.log(name,age,qq); //输出:小明 18 123456
  3. /*当参数不足时候*/
  4. let [name,age,qq,height=160] = ["小明",18,123456];
  5. console.log(name,age,qq,height); //输出:小明",18,123456,160
  6. /*当参数过多的时候*/
  7. let [name,age,qq,...e] = ["小明",18,123456,180,"123456@qq.com"];//把多的参数压到e数组中
  8. console.log(name,age,qq,e);//e就是一个数组
  9. /*交换两个值*/
  10. let a = 1;
  11. let b = 2;
  12. let c = 0;
  13. c = a; //开始交换
  14. a = b;
  15. b = c;
  16. console.log("a=%d,b=%d",a,b); //交换前1,2,交换后2,1。

2.对象结构

  1. let {name,age,height} = {name:"小明",age:18,height:160};//对象结构,属性和变量名要相同
  2. console.log(name,age,height);
  3. ({name,age,height} = {name:"小明2",age:19,height:170});//去掉let加上括号表达式。
  4. console.log(name,age,height);
  5. let {name:myname,age:myage,height:myheight} = {name:"小明3",age:20,height:180};//使用别名,为了防止变量名相同。
  6. console.log(myname,myage,myheight);
  7. let{...s} = {name:"小明3",age:20,height:180};//当传入对象前不知道有多少个值就用...
  8. console.log(s);

3.解析函数参数

  1. function user(p){
  2. console.log(p.name,p.age)
  3. }
  4. user({name:"小明",age:18});
  5. function user({name,age}){ //结构简化传参,使用
  6. console.log(name,age)
  7. }
  8. user({name:"小明2",age:19});

dom增删改查基本使用

document指的就是当前的页面
  • html代码
    1. <ul class="cl">
    2. <li class="cls">cls1</li>
    3. <li class="cls">cls2</li>
    4. <li class="cls">cls3</li>
    5. <li class="cls">cls4</li>
    6. <li class="cls">cls5</li>
    7. </ul>
    8. <form action="" method="post" id="lo">
    9. <input type="email" name="email2" value="123@qq.com">
    10. <button>提交</button>
    11. </form>
    1. //创建元素
    2. let div = document.createElement("div");//创建div标签
    3. let p = document.createElement("p");//创建p标签
    4. p.textContent = "苹果";//给P标签添加内容
    5. document.body.append(div);//在body添加div标签元素
    6. p.append(5899); //p标签里面增加内容
    7. //简易添加
    8. let p1 = document.createElement("p");//创建p标签
    9. p1.textContent="快了"; //添加内容
    10. div.insertAdjacentElement("beforebegin",p1);//把P1插入到div起始前面,beforBegin起始标签前面、afterBegin起始后面、beforEnd结束标签前面、afterEnd结束标签后面。
    1. let doc=document.querySelector(".cl >.cls");//查找选择器集合类的第一个
    2. let doc=document.querySelectorAll(".cl >.cls");//查找所有选择器类的数组
    3. doc.forEach(cls =>(cls.style.color="red"));//循环遍历cls加上颜色
    4. .....................................
    5. let val = document.forms.lo.email2.value;//查询email2的值,在CSS中推荐使用id值,因为没有name值。
    6. console.log(val);//输出123@qq.com
    7. .......................................
    8. et st = document.querySelector(".cl");
    9. console.log(st.childNodes);//查看所有节点
    10. console.log(st.children);// 查看所有节点(不区分类型),建议使用
    11. console.log([...st.children]);//转为数组
    12. [...st.children].forEach(it=>(it.style.color="red"));//循环遍历改red色
    13. [...st.children][0].style.color = "blue";//转为数组选择第一个
    14. st.firstElementChild.style.background="yellow";//选择第一个
    15. st.lastElementChild.style.background="yellow";//选择最后一个
    16. st.firstElementChild.nextElementSibling.style.background="green";//选择第一个的下一个
    17. st.lastElementChild.previousElementSibling.style.background="violet";//选择最后一个的前一个
    1. h2.classList.replace("red","blue");//修改颜色,前面是被修改值,后面是要修改的值。
    1. let h2=document.querySelector("h2");//查询h2标签对象
    2. h2.classList.add("yellow");//添加<style>里的class颜色
    3. h2.classList.add("red");
    4. h2.classList.remove("red");//删除颜色

    自定义属性dataset对象和CSS的classList对象

    dataset用于自定义属性获取,自定义必须为data-为前缀,访问时不需要。
  • html代码
    1. .lv{
    2. background-color: chartreuse;
    3. }
    4. .yellow{
    5. background-color: yellow;
    6. }
    7. .red{
    8. color: red;
    9. }
    10. .blue{
    11. color: blue;
    12. }
    13. <div id="user" data-email="123@qq.com" data-index="22">
    14. <h2>哈哈哈</h2>
    15. </div>
  • dataset对象
    1. let div2=document.querySelector("#user");
    2. console.log(div2.dataset.email);//输出123@qq.com
    3. console.log(div2.dataset.index);//输出22
  • classList对象
    1. let h2 = document.querySelector("h2");//查询h2标签对象
    2. h2.classList.add("yellow");//添加<style>里的class颜色
    3. h2.classList.add("red");
    4. // h2.classList.remove("red");删除颜色
    5. h2.classList.replace("red","blue");//修改颜色,前面是被修改值,后面是要修改的值。