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

    目录

    | 节点操作

    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 元素（节点）均可被修改，也可以 创建或删除。

    • 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。

    • 我们在实际开发中，节点操作主要操作的是元素节点

    什么是节点操作？

    代码示例

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div>
    11.         <span>span>
    12.     div>
    13.  
    14.     <script>
    15.         // 如果以前想得到div和span元素，需要进行两步
    16.         var divObj = document.getElementsByTagName('div');
    17.         var spanObj = document.getElementsByTagName('span');
    18.  
    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 获取父节点

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

     

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

    var ul = document.getElementsByTags('ul');

    var lis = ul.childNodes;

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

    具体原因如下

    1. <ul>（换行 第一个节点）
    2. 	XXXli>（换行，第三个节点）
    3. 	XXXli>（换行，第五个节点）
    4. ul>

     


    • 综上，因为返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

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

    parentNode.children

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

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div>
    11.         <span>span>
    12.         <span>span>
    13.         <span>span>
    14.         <span>span>
    15.     div>
    16.  
    17.     <script>
    18.         var divObj = document.querySelector('div');
    19.         var children1 = divObj.childNodes;
    20.         var children2 = divObj.children;
    21.  
    22.         var str1 = '';
    23.         var str2 = '';
    24.  
    25.         for(var i=0 ; ilength ; i++) {
    26.             str1 += children1[i];
    27.         }
    28.         for(var i=0 ; ilength ; i++) {
    29.             str2 += children2[i];
    30.         }
    31.  
    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]
    34.  
    35.     script>
    36. body>
    37. html>

     

     

    3-3 获取首尾子节点

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

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

     


    实际开发中，如何用兼容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


    代码示例

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

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <ul>
    11.  
    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. 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>Documenttitle>
    8.     <style>
    9.         * {
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.  
    14.         li {
    15.             list-style: none;
    16.         }
    17.  
    18.         textarea{
    19.             display: block;
    20.  
    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;
    29.  
    30.             font-family: 'Microsoft YaHei';
    31.             font-size: 20px;
    32.         }
    33.  
    34.         button {
    35.             display: block;
    36.  
    37.             background-color: lightskyblue;
    38.             width: 100px;
    39.             height: 40px;
    40.             margin: 0 auto;
    41.         }
    42.  
    43.         ul {
    44.             width: 500px;
    45.             margin: 40px auto;
    46.             background-color: lightgoldenrodyellow;
    47.         }
    48.  
    49.         li {
    50.             width: 500px;
    51.             margin: 5px auto;
    52.             height: 30px;
    53.             border-bottom: 1px solid grey;
    54.         }
    55.  
    56.     style>
    57. head>
    58. <body>
    59.     <textarea placeholder="输入评论" name="comment">textarea>
    60.     <button>发布button>
    61.     <ul>
    62.     ul>
    63.  
    64.     
    65.     <script>
    66.         var btn = document.querySelector('button');
    67.         var text = document.querySelector('textarea');
    68.  
    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 删除节点

    代码示例

     

    5-5 复制节点

    代码示例

     

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

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

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

    • CSS 和 Html的知识

    • 数组存放对象

    • 循环创建事件

    • 如何在table的tbody中插入行、在行中插入列

    • 注意删除按钮的书写 要使用innerHTML方法以渲染html标签

    • 注意删除的时候，删除的是 相对于a 的父亲（tr）的父亲（td），即删除行的那个元素节点。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    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>Documenttitle>
    9.     <style>
    10.         table {
    11.             width: 500px;
    12.             margin: 100px auto;
    13.             border-collapse: collapse;
    14.             text-align: center;
    15.         }
    16.         
    17.         td,
    18.         th {
    19.             border: 1px solid #333;
    20.         }
    21.         
    22.         thead tr {
    23.             height: 40px;
    24.             background-color: #ccc;
    25.         }
    26.     style>
    27. head>
    28.  
    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>
    40.  
    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 = '删除 ';
    84.             tr.appendChild(td);
    85.  
    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>
    101.  
    102. html>

     

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

     

    | 总结

     

     

     

     

  • 相关阅读:
    VMware ESXi 7.0 Update 3e SLIC 2.6 & macOS Unlocker (2022.07 更新)
    软件设计模式系列之七——原型模式
    指令系统（考研笔记）
    【springboot整合ES】springboot整合ES
    JAVA必应回答。
    通过构建一个顺序表——教你计算时间复杂度和空间复杂度（含递归）
    Vue生命周期
    【PowerQuery】PowerBI Pro账户的自动刷新
    不要62——数位dp打卡
    压缩文件的自动加密怎么解除
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/127981342