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

结构赋值

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

1.数组结构

let [name,age,qq] = ["小明",18,123456]; //模板=数组值
console.log(name,age,qq); //输出：小明 18 123456
/*当参数不足时候*/
let [name,age,qq,height=160] = ["小明",18,123456];
console.log(name,age,qq,height); //输出：小明",18,123456，160
/*当参数过多的时候*/
let [name,age,qq,...e] = ["小明",18,123456,180,"[e-mail]"];//把多的参数压到e数组中
console.log(name,age,qq,e);//e就是一个数组
/*交换两个值*/
let a = 1;
let b = 2;
let c = 0;
c = a; //开始交换
a = b;
b = c;
console.log("a=%d,b=%d",a,b); //交换前1,2，交换后2,1。

2.对象结构

let {name,age,height} = {name:"小明",age:18,height:160};//对象结构，属性和变量名要相同
console.log(name,age,height);

({name,age,height} = {name:"小明2",age:19,height:170});//去掉let加上括号表达式。
console.log(name,age,height);

let {name:myname,age:myage,height:myheight} = {name:"小明3",age:20,height:180};//使用别名，为了防止变量名相同。
console.log(myname,myage,myheight);

let{...s} = {name:"小明3",age:20,height:180};//当传入对象前不知道有多少个值就用...
console.log(s);

3.解析函数参数

function user(p){ 
    console.log(p.name,p.age)
}
user({name:"小明",age:18});

function user({name,age}){ //结构简化传参，使用
    console.log(name,age)
}
user({name:"小明2",age:19});

dom增删改查基本使用

document指的就是当前的页面

• html代码

  
  <ul class="cl">
        <li class="cls">cls1</li>
        <li class="cls">cls2</li>
        <li class="cls">cls3</li>
        <li class="cls">cls4</li>
        <li class="cls">cls5</li>
  </ul>
  <form action="" method="post" id="lo">
    <input type="email" name="email2" value="[e-mail]">
    <button>提交</button>
  </form>
  

• 增

  
  //创建元素
  let div = document.createElement("div");//创建div标签
  let p = document.createElement("p");//创建p标签
  p.textContent = "苹果";//给P标签添加内容
  document.body.append(div);//在body添加div标签元素
  p.append(5899); //p标签里面增加内容
  //简易添加
  let p1 = document.createElement("p");//创建p标签
  p1.textContent="快了"; //添加内容
  div.insertAdjacentElement("beforebegin",p1);//把P1插入到div起始前面，beforBegin起始标签前面、afterBegin起始后面、beforEnd结束标签前面、afterEnd结束标签后面。
  

• 查

  
  let doc=document.querySelector(".cl >.cls");//查找选择器集合类的第一个
  let doc=document.querySelectorAll(".cl >.cls");//查找所有选择器类的数组
  doc.forEach(cls =>(cls.style.color="red"));//循环遍历cls加上颜色
  .....................................
  let val = document.forms.lo.email2.value;//查询email2的值,在CSS中推荐使用id值，因为没有name值。
  console.log(val);//输出[e-mail]
  .......................................
  et st = document.querySelector(".cl");
  console.log(st.childNodes);//查看所有节点
  console.log(st.children);// 查看所有节点(不区分类型),建议使用
  console.log([...st.children]);//转为数组
  [...st.children].forEach(it=>(it.style.color="red"));//循环遍历改red色 
  [...st.children][0].style.color = "blue";//转为数组选择第一个
  st.firstElementChild.style.background="yellow";//选择第一个
  st.lastElementChild.style.background="yellow";//选择最后一个
  st.firstElementChild.nextElementSibling.style.background="green";//选择第一个的下一个
  st.lastElementChild.previousElementSibling.style.background="violet";//选择最后一个的前一个
  

• 改

  h2.classList.replace("red","blue");//修改颜色，前面是被修改值，后面是要修改的值。

• 删

  
  let h2=document.querySelector("h2");//查询h2标签对象
  h2.classList.add("yellow");//添加<style>里的class颜色
  h2.classList.add("red");
  h2.classList.remove("red");//删除颜色
  

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

  dataset用于自定义属性获取，自定义必须为data-为前缀，访问时不需要。

• html代码

  
    .lv{
        background-color: chartreuse;
    }
    .yellow{
        background-color: yellow;
    }
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
  <div id="user" data-email="[e-mail]" data-index="22">
        <h2>哈哈哈</h2>
  </div>
  

• dataset对象

  
  let div2=document.querySelector("#user");
  console.log(div2.dataset.email);//输出[e-mail]
  console.log(div2.dataset.index);//输出22
  

• classList对象

  
  let h2 = document.querySelector("h2");//查询h2标签对象
  h2.classList.add("yellow");//添加<style>里的class颜色
  h2.classList.add("red");
  // h2.classList.remove("red");删除颜色
  h2.classList.replace("red","blue");//修改颜色，前面是被修改值，后面是要修改的值。