【第五部分 | JS WebAPI】3：DOM 节点操作

太过爱你忘了你带给我的痛 2023-09-23 16:06 203阅读 0赞

目录

| 节点操作

1-1 概述

2-1 获取父节点

3-1 获取子节点（获取所有子对象 不推荐）

3-2 获取子节点（获取所有子【元素节点】）

3-3 获取首尾子节点

4-1 获取兄弟节点

5-1 动态创建、添加节点

5-2 案例：评论区

5-4 删除节点

5-5 复制节点

| 综合案例：动态生成表格

| 三种动态创建元素的区别

| 总结

| 节点操作

1-1 概述

什么是节点？

  • 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。我们常用的是元素节点
  • HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以 创建或删除。
  • b399c4d76c094bd79aa648e41569b091.png
  • 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。
  • 我们在实际开发中，节点操作主要操作的是元素节点

什么是节点操作？

00fb1d14ce5d476eb4b1f7158d5c8805.png

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <span></span>
  12.     </div>
  14.     <script>
  15.         // 如果以前想得到div和span元素，需要进行两步
  16.         var divObj = document.getElementsByTagName('div');
  17.         var spanObj = document.getElementsByTagName('span');
  19.         // 而我们若使用节点操作来获取父元素，则只需要获取某一个元素对象，然后根据这个元素对象和其它元素对象的层级关系，使用对应的函数即可
  20.         // span是div的父节点。我们得到了span，则只需要操作这个节点，使用parentNode就可以获取其父节点对象div了
  21.         var spanObj2 = document.getElementsByTagName('span');
  22.         divObj2 = spanObj2[0].parentNode;
  23.         console.log(divObj2);  //div
  24.     </script>
  25. </body>
  26. </html>

2-1 获取父节点

eae66825092842308392ba5b88ebb44d.png

3-1 获取子节点（获取所有子对象 不推荐）

9179e5cf3d0347f8a8055c66de513103.png

子元素的标签、换行符会被认为是节点。 如下列代码，若使用

var ul = document.getElementsByTags(‘ul’);

var lis = ul.childNodes;

代码，则会获得的不仅仅是一个含有2个li的元素对象伪数组，而是一个含有5个元素对象的伪数组

具体原因如下

  1. <ul>（换行 第一个节点）
  2.     <li（标签，第二个节点）>XXX</li>（换行，第三个节点）
  3.     <li（标签，第四个节点）>XXX</li>（换行，第五个节点）
  4. </ul>
  • 综上，因为返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

3-2 获取子节点（获取所有子【元素节点】）

  1. parentNode.children

66a128da669c4f9cbed9b441d6e7473a.png

代码示例（childNode 和 children 的对比）

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <span></span>
  12.         <span></span>
  13.         <span></span>
  14.         <span></span>
  15.     </div>
  17.     <script>
  18.         var divObj = document.querySelector('div');
  19.         var children1 = divObj.childNodes;
  20.         var children2 = divObj.children;
  22.         var str1 = '';
  23.         var str2 = '';
  25.         for(var i=0 ; i<children1.length ; i++) {
  26.             str1 += children1[i];
  27.         }
  28.         for(var i=0 ; i<children2.length ; i++) {
  29.             str2 += children2[i];
  30.         }
  32.         console.log(str1); //[object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text]
  33.         console.log(str2); //[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]
  35.     </script>
  36. </body>
  37. </html>

3-3 获取首尾子节点

注意：firstChild得到的 该子节点包含“换行符等非元素节点”

a1e3118ed84e42c69bfa7da846077d1d.png

下列两个方法可以获取的是首尾子【元素】节点

e80285ea9b2a47f7936f4938310b00b1.png

实际开发中，如何用兼容IE9以下版本浏览器的方法得到 firstElementChild 和 lastElementChild ？

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

1.如果想要第一个子元素节点，可以使用 parentNode.chilren[0]

2.如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

4-1 获取兄弟节点

注意：该方法得到的 兄弟节点包含“换行符等非元素节点”

  1. node.nextSibling  //返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
  2.  node.previousSibling  // 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

下列两个方法可以获取的是兄弟子【元素】节点

  1. node.nextElementSibling   //返回当前元素下一个兄弟元素节点，找不到则返回null。
  2.  node.previousElementSibling   //g 返回当前元素上一个兄弟节点，找不到则返回null。

可以自己封装一个兼容IE9以下浏览器的获取兄弟子【元素】节点的函数

  1. function getNextElementSibling(element) {
  2.      var el = element;
  3.      while (el = el.nextSibling) {
  4.          if (el.nodeType === 1) {
  5.              return el;
  6.          }
  7.      }
  8.      return null;
  9.  }

5-1 动态创建、添加节点

  • 使用场景：如想给 ul 中动态地添加 li

60dbfa9490a94a1b9f11516faf5d3370.png

代码示例

基本步骤：获取父节点元素 → 创建要插入的元素 → 插入元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <ul>
  12.     </ul>
  13.     <script>
  14.         // 动态创建元素节点
  15.         var liElement = document.createElement('li');
  16.         // 把创建的元素节点加入（获取父节点 → 添加子节点）
  17.         var ulNode = document.querySelector('ul');
  18.         ulNode.appendChild(liElement);
  19.     </script>
  20. </body>
  21. </html>

5-2 案例：评论区

核心思路︰点击按钮之后，就动态创建一个li，添加到ul里面。创建li的同时，把文本域里面的值通过li.innerHTML赋值给li

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         li {
  15.             list-style: none;
  16.         }
  18.         textarea{
  19.             display: block;
  21.             resize:none;  /* 取消拖拽 */
  22.             outline: none;/* 取消选中高亮 */
  23.             height: 200px;
  24.             width: 500px;
  25.             margin: 100px auto;
  26.             margin-bottom: 30px;
  27.             background-color: aliceblue;
  28.             padding: 10px;
  30.             font-family: 'Microsoft YaHei';
  31.             font-size: 20px;
  32.         }
  34.         button {
  35.             display: block;
  37.             background-color: lightskyblue;
  38.             width: 100px;
  39.             height: 40px;
  40.             margin: 0 auto;
  41.         }
  43.         ul {
  44.             width: 500px;
  45.             margin: 40px auto;
  46.             background-color: lightgoldenrodyellow;
  47.         }
  49.         li {
  50.             width: 500px;
  51.             margin: 5px auto;
  52.             height: 30px;
  53.             border-bottom: 1px solid grey;
  54.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <textarea placeholder="输入评论" name="comment"></textarea>
  60.     <button>发布</button>
  61.     <ul>
  62.     </ul>
  64.     <!-- 点击按钮，获取文本域，然后添加li -->
  65.     <script>
  66.         var btn = document.querySelector('button');
  67.         var text = document.querySelector('textarea');
  69.         btn.onclick = function(){
  70.             // 获取文本域文本
  71.             var textContent = text.value;
  72.             //创建li节点
  73.             var newLi = document.createElement('li');
  74.             //添加li节点
  75.             var ul = document.querySelector('ul');
  76.             ul.appendChild(newLi);
  77.             // 向li节点中添加内容 innerHTML
  78.             newLi.innerHTML = textContent;
  79.             // 清空文本
  80.             text.value = '';
  81.         }
  82.     </script>
  83. </body>
  84. </html>

5-4 删除节点

c1cd795fc6bb471a9898b1ecfdcaefe8.png

代码示例

896153a458a343e0bf8ee99c4ff78d12.png

5-5 复制节点

f6f6546e71244f06a3dc509c67c0b279.png

代码示例

7b32ca849d8542d293cef42cf5d95167.png

| 综合案例：动态生成表格

目前还没学习Ajax，无法动态通过数据库获取数据。因此我们把数据写在对象中

注意体会上述知识的综合使用：

  • CSS 和 Html的知识
  • 数组存放对象
  • 循环创建事件
  • 如何在table的tbody中插入行、在行中插入列
  • 注意删除按钮的书写 要使用innerHTML方法以渲染html标签
  • 注意删除的时候，删除的是 相对于a 的父亲（tr）的父亲（td），即删除行的那个元素节点。

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         table {
  11.             width: 500px;
  12.             margin: 100px auto;
  13.             border-collapse: collapse;
  14.             text-align: center;
  15.         }
  17.         td,
  18.         th {
  19.             border: 1px solid #333;
  20.         }
  22.         thead tr {
  23.             height: 40px;
  24.             background-color: #ccc;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <table cellspacing="0">
  31.         <thead>
  32.             <tr>
  33.                 <th>姓名</th>
  34.                 <th>科目</th>
  35.                 <th>成绩</th>
  36.                 <th>操作</th>
  37.             </tr>
  38.         </thead>
  39.         <tbody>
  41.         </tbody>
  42.     </table>
  43.     <script>
  44.         // 1.先去准备好学生的数据
  45.         var datas = [{
  46.             name: '魏璎珞',
  47.             subject: 'JavaScript',
  48.             score: 100
  49.         }, {
  50.             name: '弘历',
  51.             subject: 'JavaScript',
  52.             score: 98
  53.         }, {
  54.             name: '傅恒',
  55.             subject: 'JavaScript',
  56.             score: 99
  57.         }, {
  58.             name: '明玉',
  59.             subject: 'JavaScript',
  60.             score: 88
  61.         }, {
  62.             name: '大猪蹄子',
  63.             subject: 'JavaScript',
  64.             score: 0
  65.         }];
  66.         // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
  67.         var tbody = document.querySelector('tbody');
  68.         for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
  69.             // 1. 创建 tr行
  70.             var tr = document.createElement('tr');
  71.             tbody.appendChild(tr);
  72.             // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
  73.             for (var k in datas[i]) { // 里面的for循环管列 td
  74.                 // 创建单元格 
  75.                 var td = document.createElement('td');
  76.                 // 把对象里面的属性值 datas[i][k] 给 td  
  77.                 // console.log(datas[i][k]);
  78.                 td.innerHTML = datas[i][k];
  79.                 tr.appendChild(td);
  80.             }
  81.             // 3. 创建有删除2个字的单元格 
  82.             var td = document.createElement('td');
  83.             td.innerHTML = '<a href="javascript:;">删除 </a>';
  84.             tr.appendChild(td);
  86.         }
  87.         // 4. 删除操作 开始 
  88.         var as = document.querySelectorAll('a');
  89.         for (var i = 0; i < as.length; i++) {
  90.             as[i].onclick = function() {
  91.                 // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  a的爸爸是tr，tr的爸爸是td，因此删除的是td。注意使用的是this 
  92.                 tbody.removeChild(this.parentNode.parentNode)
  93.             }
  94.         }
  95.         // for(var k in obj) {
  96.         //     k 得到的是属性名
  97.         //     obj[k] 得到是属性值
  98.         // }
  99.     </script>
  100. </body>
  102. </html>

| 三种动态创建元素的区别

49f5d8c7cae641ce8cc8e1e8fdd35c81.png

| 总结

b7408fdc45184a23809ebef0b3660209.png

098774d07ad0407491ff8bad7f661a4c.png

e3f4c30b8e7f4a2baa483202a63246a0.png

f21f38219e4b44e5a264e495b1c4eb41.png

发表评论

表情：
评论列表 （有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读