解构赋值、dom 元素增删改查及 dataset,classList 对象的基本使用

解构赋值

解构赋值可以将多值变量（引用），解析到单值变量中

数组解构

数组结构的基本语法是：let[模板]=[具体的值]，需要注意：等号左右两边的语法必须一致，左边与右边的内容必须一一对应

let [uName, uEmail] = ["admin", "abc@qq.com"];

数组结构的更新方式同变量的更新方式

[uName, uEmail] = ["adm_adm", "cbd@qq.com"];

遇到参数不足的情况，可以参考函数不足的情况给变量一个默认值

[uName, uEmail, age = 18] = ["admin", "abc@qq.com"];

遇到参数过剩的情况，也可以使用归并参数来将最后一个值变成数组

let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8];

数值交换，直接对调两个变量赋值即可完成数值交换的操作

[x, y] = [10, 20];
[x, y] = [y, x];

对象解构

对象与数组的不同之处就是对象有对象名，变量名必须对象的属性相同，其他的要求跟数组一样

let { id, course, score } = { id: 1, course: "js", score: 90 };

对象的变量更新会涉及到一个问题，就是=左侧的值（左值），不允许有大括号，因此，需要把整段代码加到小括号中，将其变为一个表达式

({ id, course, score } = { id: 2, course: "php", score: 100 });

对象的内容中可能会有属性名对应的变量与现在已有的变量冲突的情况，此时，可以使用别名来防止命名冲突

let { uName: myName, uEmail: myEmail } = { uName: "admin", uEmail: "abc@qq.com" };

对象的参数不足也可以赋初始值给变量

let { f, g, h = 30 } = { f: 10, g: 20 };

同样对象的参数过剩，也可以使用归并参数

let { ...n } = { a: 1, b: 2, c: 3 };

解构赋值在函数中的应用

解构赋值常用于函数的参数
如给定一个用户信息 user，去获取他内部的信息

传统写法：

user = { id: 1, name: "zhangsirui", age: 80 };
function getInfo(user) {
  console.log(user.id, user.name, user.age);
}
getInfo(user);

使用解构赋值可以写为：

user = { id: 1, name: "zhangsirui", age: 80 };
function getInfo({ id, name, age }) {
  console.log(id, name, age);
}
getInfo(user);

dom 元素增删改查 dataset,classList 对象的基本使用

获取 dom 节点
- 获取 dom 节点使用 document.querySelectorAll();来获取一个元素节点集合，
- 该节点集合是一个伪数组，可以使用数组的部分功能及属性，如用 forEach 遍历，使用 length 等属性
- 或使用 document.querySelector();来获取一个元素节点集合的首个元素
- 部分元素可以用快捷方式快速访问，如:document.body,document.head,document.title,document.doctype 等
- 表单元素也可以使用快捷方式访问：document.forms
- 表单元素的获取可以使用数组中的[0]来获取，也可以使用 item(0)来获取，还可以使用 name 跟 id 值来获取，但是一般推荐使用 id 而不是 name，因为 css 中常用设置样式的是 id
- 表单元素里面的内容部分（input 等），就可以使用 name 直接访问了
对获取的 dom 节点进行操作
- dom 中看到的所有内容都是节点
- 节点类型：元素、文本、文档、注释、文档碎片等
- 使用 ul.childNodes 可以查看所有节点
- 使用 ul.children 可以查看所有标签节点
- ul.childNodes 是类数组可以遍历，ul.children 是伪数组不能遍历，需要将其转为数组
- 将 ul.children 转为数组有两种方式：1、Array.from(ul.children),2、[…ul.children]

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom树的遍历</title>
  </head>
  <body>
    <ul class="list">
      <li class="items">item1</li>
      <li class="items">item2</li>
      <li class="items">item3</li>
      <li class="items">item4</li>
      <li class="items">item5</li>
    </ul>
    <script>
      let ul = document.querySelector(".list");
      //查看所有节点
      console.log(ul.childNodes);
      //查看标签节点
      console.log(ul.children);
      //ul.children转为数组
      //Array.from()方法
      console.log(Array.from(ul.children));
      //   ...展开
      console.log([...ul.children]);
      //   获取父元素下的第一个标签元素
      [...ul.children][0].style.color = "blue";
      //   可以简写为ul.firstElementChild,这个就是直接获取第一个标签元素了，不需要再加children
      ul.firstElementChild.style.backgroundColor = "lightskyblue";
      //   获取父元素下的最后一个子标签元素
      ul.lastElementChild.style.backgroundColor = "lightgreen";
      //   获取下一个兄弟元素，以第一个标签元素为例
      ul.firstElementChild.nextElementSibling.style.backgroundColor = "yellow";
      //   获取前一个兄弟元素，以最后一个标签元素为例
      ul.lastElementChild.previousElementSibling.style.backgroundColor = "violet";
    </script>
  </body>
</html>

dom 节点像获取的元素的内部按顺序添加内容：获取到的文档中的元素.append(插入的内容)
om 节点像获取的元素的起始标签跟结束标签前后添加内容：获取到的文档中的元素.insertAdjacentElement(“插入的位置”,要插入的内容)
insertAdjacentElement()四个插入位置，起始标签前：beforeBegin，起始标签后：afterBegin，结束标签前：beforeEnd，结束标签后：afterEnd。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom元素增</title>
  </head>
  <body>
    <script>
      //   创建元素
      //   创建到内存中，页面还不可见
      let div = document.createElement("div");
      let p = document.createElement("p");
      //   标签添加内容：textContent
      p.textContent = "标签添加内容：textContent";
      div.textContent = "标签添加内容：textContent";
      //   添加到页面中
      //   插入内容，包括元素、文本内容等 append()方法
      document.body.append(div);
      div.append(p);
      p.append("插入内容，包括元素、文本内容等 append()方法");
      const li = document.createElement("li");
      li.textContent = "item1";
      div.append(li);
      //   insertAdjacentElement(四选一位置，要插入的元素)插入元素
      let hr = document.createElement("hr");
      let demo = document.createElement("div");
      demo.textContent = "我是中心";
      demo.style.backgroundColor = "red";
      document.body.append(hr, demo);
      // 起始标签前
      let bb = document.createElement("div");
      bb.textContent = "我插入到了中心div起始标签的前面";
      bb.style.backgroundColor = "yellow";
      demo.insertAdjacentElement("beforeBegin", bb);
      // 起始标签后
      let ab = document.createElement("div");
      ab.textContent = "我插入到了中心div起始标签的后面";
      ab.style.backgroundColor = "lightgreen";
      demo.insertAdjacentElement("afterBegin", ab);
      // 结束标签前
      let be = document.createElement("div");
      be.style.backgroundColor = "lightskyblue";
      be.textContent = "我插入到了中心div结束标签的前面";
      demo.insertAdjacentElement("beforeEnd", be);
      // 结束标签后
      let ae = document.createElement("div");
      ae.style.backgroundColor = "violet";
      ae.textContent = "我插入到了中心div结束标签的后面";
      demo.insertAdjacentElement("afterEnd", ae);
    </script>
  </body>
</html>

dataset 的基本使用
dataset 可以快速获取用户自定义的 data-开头的属性，而不用用 getAttribute()的方式获取

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义属性</title>
  </head>
  <body>
    <!-- id、class等常用来进行css操作的这几个属性叫内置属性/预定义属性，email、index:自定义属性/数据属性自己定义添加的，叫自定义属性 -->
    <div id="test" class="test" email="test@test.com" index="test">
      <h2>hello world</h2>
    </div>
    <!-- 将自定义属性前面加一个data-，js中使用dataset获取该属性 -->
    <div id="test2" class="test2" data-email="test@test2.com" data-index="test2">
      <h2>hello world</h2>
    </div>
    <script>
      const div = document.querySelector("#test");
      console.log(div);
      //   getAttribute获取方式
      console.log(div.getAttribute("email"));
      const div2 = document.querySelector("#test2");
      console.log(div2);
      //dataset获取方式
      //dataset用于获取用户的自定义属性，自定义属性必须使用data-为前缀,访问时不写前缀
      console.log(div2.dataset.email);
    </script>
  </body>
</html>

classList 的基本使用
classList 可以动态的给元素添加、删除、替换 class 类：
- 添加：获取的元素.classList.add(“类名”)
- 移除：获取的元素.classList.remove(“类名”)
- 替换：获取的元素.classList.replace(“类名”)

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>classList 的基本使用</title>
    <style>
      .red {
        color: red;
      }
      .lightgreen {
        color: lightgreen;
      }
      .hotpink {
        background-color: hotpink;
      }
      #test > h2 {
        border: 6px solid black;
      }
    </style>
  </head>
  <body>
    <div id="test" class="test">
      <h2>hello world</h2>
    </div>
    <script>
      let h2 = document.querySelector("#test>h2");
      //   element.classList.add("要添加的类名")添加
      //   element.classList.remove("要移除的类名")移除
      //   element.classList.replace("被替换的类名","替换为的类名")替换
      h2.classList.add("red");
      h2.classList.add("hotpink");
      h2.classList.remove("hotpink");
      h2.classList.replace("red", "lightgreen");
    </script>
  </body>
</html>

解构赋值、dom 元素增删改查及 dataset,classList 对象的基本使用

解构赋值、dom 元素增删改查及 dataset,classList 对象的基本使用

解构赋值

数组解构

对象解构

解构赋值在函数中的应用

dom 元素增删改查 dataset,classList 对象的基本使用

全部评论

关注公众号QQ交流群