search

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

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

超超多喝水
超超多喝水原创
2021年10月06日 21:03:24652浏览

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

解构赋值

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

数组解构

  • 数组结构的基本语法是：let[模板]=[具体的值]，需要注意：等号左右两边的语法必须一致，左边与右边的内容必须一一对应
  1. let [uName, uEmail] = ["admin", "abc@qq.com"];
  • 数组结构的更新方式同变量的更新方式
  1. [uName, uEmail] = ["adm_adm", "cbd@qq.com"];
  • 遇到参数不足的情况，可以参考函数不足的情况给变量一个默认值
  1. [uName, uEmail, age = 18] = ["admin", "abc@qq.com"];
  • 遇到参数过剩的情况，也可以使用归并参数来将最后一个值变成数组
  1. let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8];
  • 数值交换，直接对调两个变量赋值即可完成数值交换的操作
  1. [x, y] = [10, 20];
  2. [x, y] = [y, x];

对象解构

  • 对象与数组的不同之处就是对象有对象名，变量名必须对象的属性相同，其他的要求跟数组一样
  1. let { id, course, score } = { id: 1, course: "js", score: 90 };
  • 对象的变量更新会涉及到一个问题，就是=左侧的值（左值），不允许有大括号，因此，需要把整段代码加到小括号中，将其变为一个表达式
  1. ({ id, course, score } = { id: 2, course: "php", score: 100 });
  • 对象的内容中可能会有属性名对应的变量与现在已有的变量冲突的情况，此时，可以使用别名来防止命名冲突
  1. let { uName: myName, uEmail: myEmail } = { uName: "admin", uEmail: "abc@qq.com" };
  • 对象的参数不足也可以赋初始值给变量
  1. let { f, g, h = 30 } = { f: 10, g: 20 };
  • 同样对象的参数过剩，也可以使用归并参数
  1. let { ...n } = { a: 1, b: 2, c: 3 };

解构赋值在函数中的应用

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

  • 传统写法：
  1. user = { id: 1, name: "zhangsirui", age: 80 };
  2. function getInfo(user) {
  3.   console.log(user.id, user.name, user.age);
  4. }
  5. getInfo(user);
  • 使用解构赋值可以写为：
  1. user = { id: 1, name: "zhangsirui", age: 80 };
  2. function getInfo({ id, name, age }) {
  3.   console.log(id, name, age);
  4. }
  5. 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]
  1. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>dom树的遍历</title>
  9.   </head>
  10.   <body>
  11.     <ul class="list">
  12.       <li class="items">item1</li>
  13.       <li class="items">item2</li>
  14.       <li class="items">item3</li>
  15.       <li class="items">item4</li>
  16.       <li class="items">item5</li>
  17.     </ul>
  18.     <script>
  19.       let ul = document.querySelector(".list");
  20.       //查看所有节点
  21.       console.log(ul.childNodes);
  22.       //查看标签节点
  23.       console.log(ul.children);
  24.       //ul.children转为数组
  25.       //Array.from()方法
  26.       console.log(Array.from(ul.children));
  27.       //   ...展开
  28.       console.log([...ul.children]);
  29.       //   获取父元素下的第一个标签元素
  30.       [...ul.children][0].style.color = "blue";
  31.       //   可以简写为ul.firstElementChild,这个就是直接获取第一个标签元素了，不需要再加children
  32.       ul.firstElementChild.style.backgroundColor = "lightskyblue";
  33.       //   获取父元素下的最后一个子标签元素
  34.       ul.lastElementChild.style.backgroundColor = "lightgreen";
  35.       //   获取下一个兄弟元素，以第一个标签元素为例
  36.       ul.firstElementChild.nextElementSibling.style.backgroundColor = "yellow";
  37.       //   获取前一个兄弟元素，以最后一个标签元素为例
  38.       ul.lastElementChild.previousElementSibling.style.backgroundColor = "violet";
  39.     </script>
  40.   </body>
  41. </html>
  • dom 节点像获取的元素的内部按顺序添加内容 ：获取到的文档中的元素.append(插入的内容)
  • om 节点像获取的元素的起始标签跟结束标签前后添加内容：获取到的文档中的元素.insertAdjacentElement(“插入的位置”,要插入的内容)
  • insertAdjacentElement()四个插入位置，起始标签前：beforeBegin，起始标签后：afterBegin，结束标签前：beforeEnd，结束标签后：afterEnd。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>dom元素增</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //   创建元素
  12.       //   创建到内存中，页面还不可见
  13.       let div = document.createElement("div");
  14.       let p = document.createElement("p");
  15.       //   标签添加内容：textContent
  16.       p.textContent = "标签添加内容：textContent";
  17.       div.textContent = "标签添加内容：textContent";
  18.       //   添加到页面中
  19.       //   插入内容，包括元素、文本内容等 append()方法
  20.       document.body.append(div);
  21.       div.append(p);
  22.       p.append("插入内容，包括元素、文本内容等 append()方法");
  23.       const li = document.createElement("li");
  24.       li.textContent = "item1";
  25.       div.append(li);
  26.       //   insertAdjacentElement(四选一位置，要插入的元素)插入元素
  27.       let hr = document.createElement("hr");
  28.       let demo = document.createElement("div");
  29.       demo.textContent = "我是中心";
  30.       demo.style.backgroundColor = "red";
  31.       document.body.append(hr, demo);
  32.       // 起始标签前
  33.       let bb = document.createElement("div");
  34.       bb.textContent = "我插入到了中心div起始标签的前面";
  35.       bb.style.backgroundColor = "yellow";
  36.       demo.insertAdjacentElement("beforeBegin", bb);
  37.       // 起始标签后
  38.       let ab = document.createElement("div");
  39.       ab.textContent = "我插入到了中心div起始标签的后面";
  40.       ab.style.backgroundColor = "lightgreen";
  41.       demo.insertAdjacentElement("afterBegin", ab);
  42.       // 结束标签前
  43.       let be = document.createElement("div");
  44.       be.style.backgroundColor = "lightskyblue";
  45.       be.textContent = "我插入到了中心div结束标签的前面";
  46.       demo.insertAdjacentElement("beforeEnd", be);
  47.       // 结束标签后
  48.       let ae = document.createElement("div");
  49.       ae.style.backgroundColor = "violet";
  50.       ae.textContent = "我插入到了中心div结束标签的后面";
  51.       demo.insertAdjacentElement("afterEnd", ae);
  52.     </script>
  53.   </body>
  54. </html>
  • dataset 的基本使用
    dataset 可以快速获取用户自定义的 data-开头的属性，而不用用 getAttribute()的方式获取
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>自定义属性</title>
  8.   </head>
  9.   <body>
  10.     <!-- id、class等常用来进行css操作的这几个属性叫内置属性/预定义属性，email、index:自定义属性/数据属性自己定义添加的，叫自定义属性 -->
  11.     <div id="test" class="test" email="test@test.com" index="test">
  12.       <h2>hello world</h2>
  13.     </div>
  14.     <!-- 将自定义属性前面加一个data-，js中使用dataset获取该属性 -->
  15.     <div id="test2" class="test2" data-email="test@test2.com" data-index="test2">
  16.       <h2>hello world</h2>
  17.     </div>
  18.     <script>
  19.       const div = document.querySelector("#test");
  20.       console.log(div);
  21.       //   getAttribute获取方式
  22.       console.log(div.getAttribute("email"));
  23.       const div2 = document.querySelector("#test2");
  24.       console.log(div2);
  25.       //dataset获取方式
  26.       //dataset用于获取用户的自定义属性，自定义属性必须使用data-为前缀,访问时不写前缀
  27.       console.log(div2.dataset.email);
  28.     </script>
  29.   </body>
  30. </html>
  • classList 的基本使用
    classList 可以动态的给元素添加、删除、替换 class 类：
    • 添加：获取的元素.classList.add(“类名”)
    • 移除：获取的元素.classList.remove(“类名”)
    • 替换：获取的元素.classList.replace(“类名”)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>classList 的基本使用</title>
  8.     <style>
  9.       .red {
  10.         color: red;
  11.       }
  12.       .lightgreen {
  13.         color: lightgreen;
  14.       }
  15.       .hotpink {
  16.         background-color: hotpink;
  17.       }
  18.       #test > h2 {
  19.         border: 6px solid black;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div id="test" class="test">
  25.       <h2>hello world</h2>
  26.     </div>
  27.     <script>
  28.       let h2 = document.querySelector("#test>h2");
  29.       //   element.classList.add("要添加的类名")添加
  30.       //   element.classList.remove("要移除的类名")移除
  31.       //   element.classList.replace("被替换的类名","替换为的类名")替换
  32.       h2.classList.add("red");
  33.       h2.classList.add("hotpink");
  34.       h2.classList.remove("hotpink");
  35.       h2.classList.replace("red", "lightgreen");
  36.     </script>
  37.   </body>
  38. </html>
上一条：js 运行机制下一条：PHP+Workerman即时通讯技术:在线聊天/客服/访客功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多