DOM节点操作

2020-12-10 本文已影响0人 amanohina

节点属性

nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读
1= 元素节点
2= 属性节点
3= 文本节点
nodeName 节点的名称(标签名称)，只读
nodeValue 节点值，返回或设置当前节点的值
元素节点的 nodeValue 始终是 null

节点层级

父子节点属性

childNodes：只读属性，获取一个节点所有子节点的实时的集合，集合是动态变化的
children：只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的HTML元素集合
firstChild：只读属性，返回该节点的第一个子节点，如果该节点没有子节点就返回null
lastChild：只读属性，返回该节点的最后一个子节点，如果没有子节点就返回null
parentNode：返回一个当前节点的父节点，没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中，这个属性返回null
parentElement：返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个DOM元素，返回null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
      <p>段落</p>
      <span>span 小盒子</span>
    </div>
    <script>
        var box = document.getElementById("box");
        // 获取子节点
        console.log(box.childNodes);   //获取所有类型的子节点
        console.log(box.children);   //获取所有元素类型的子节点
        console.log(box.firstChild);   //获取所有类型的子节点的第一个
        console.log(box.lastChild);   //获取所有类型的子节点的最后一个
        console.log(box.firstElementChild);//获取所有元素类型的子节点的第一个
        console.log(box.lastElementChild);   //获取所有元素类型的子节点的最后一个
        // 获取父级
        console.log(box.parentNode);
        console.log(box.parentElement);
    </script>
</body>
</html>

如图所示，childNodes会讲文本节点也包含进来，div头部到p标签有一个换行，p到span有一个换行，span到div尾部也有一个换行，总共三个text文本节点

nodeType类型为3，nodeValue为换行符，nodeName为"#text"

而往后我们一般用的更多的都是children和last/fristElementChild，这样可以只看元素，而不用把文本节点也算进来

兄弟节点属性

nextSibling ：只读属性，返回和该节点同级的下一个节点，没有就返回null
previousSibling：只读属性，返回与该节点同级的上一个节点，没有就返回null
nextElementSibling ：只读属性，返回与该节点同级的下一个元素节点，如果没有返回null。
previousElementSibling：只读属性，返回与该节点同级的上一个元素节点，如果没有返回null。
（与lastChild和lastElementChild类似的道理）
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才会支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>这是段落1</p>
        <p>这是段落2</p>
        <p id="p3">这是段落3</p>
        <p>这是段落4</p>
        <p>这是段落5</p>
    </div>
    <script src="common.js"></script>
    <script>
        // 获取元素
        var p3 = my$("p3");
        // 上一个兄弟节点
        console.log(p3.previousSibling);
        // 下一个兄弟节点
        console.log(p3.nextSibling);
        // 上一个兄弟元素的节点
        console.log(p3.previousElementSibling);
        // 下一个兄弟元素的节点
        console.log(p3.nextElementSibling);
        
    </script>
</body>
</html>

同理，文本节点换行符，previousElementSibling和nextElementSibling则是直接看到元素的兄弟节点

创建节点的方法

document.createElement("div") 创建元素节点
document.createAttribute("id") 创建属性节点
document.createTextNode("hello") 创建文本节点
一般将创建的新节点存在变量中，方便使用。

<script>
    // 创建新的节点
    var div = document.createElement("div");
    console.dir(div);

    var cls = document.createAttribute("class");
    console.dir(cls);

    var txt = document.createTextNode("hello");
    
    console.dir(txt);
    // 创建的新的节点，是存储在内存中的，但是并没添加到 DOM 树上
  </script>

文本节点和属性节点的相关属性

元素节点相关属性

节点常用操作方法

添加

parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。
添加
appendChild()原有的节点可以传到appendChild的参数，分为两步：1.将节点从原始位置删除。2.添加到新的指定位置。原因：内存中这个原有节点只有一个，渲染时只能有一个位置

替换，插入，删除节点

parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
parentNode.insertBefore(newNode,referenceNode)：在参考节点之前插入拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode 将被插入到子节点的末尾。
parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当前节点中。

未进行任何操作的显示内容

替换节点的代码

替换

插入代码

在p2之前插入子节点

第二个参数为null时插入到子节点末尾

移除代码

移除

克隆节点

Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为Boolean 布尔值，表示是否采用深度克隆,如果为 true,则该节点的所有后代节点也都会被克隆,如果为 false,则只克隆该节点本身，默认值为 true，节点下的内容会被克隆。
注意：克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是通过 JavaScript 动态绑定的事件不会被复制。

 // 浅度克隆
    var newBox = box.cloneNode(false);
    document.body.appendChild(newBox);

浅克隆

var newBox = box.cloneNode(true);
    document.body.appendChild(newBox);

深度克隆
克隆之后id会出现相同的情况，容易引发冲突，要记得更改id

<div id="box" onclick="alert(2)">
<!-- 行内事件是可以克隆的 -->

 var box = my$("box");
    var p2 = my$("p2");
    box.onclick = function(){
      alert(2);
    }
// 通过js绑定的时间是不可以克隆的

节点判断方法

Node.hasChildNodes()：没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有子节点。
不区分节点类型的判断
Node.contains(child)：返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
不局限于父子关系，包含节点就会返回true

判断方法总结

1.node.firstChild !== null
2.node.childNodes.length > 0
如果涉及到只判断元素节点的话可以使用first/lastElement或者children来进行判断，道理一样
3.node.hasChildNodes()

节点案例一：动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>动态创建列表</h1>
  <div id="box">
    <!-- <ul>
      <li>刘备</li>
    </ul> -->
  </div>
  <script src="common.js"></script>
  <script>
    // 获取元素
    var box = my$("box");
    // 创建一组数据
    var names = ["刘备","曹操","孙权","孙尚香"];
    // 生成ul元素
    var ul = document.createElement("ul");
    // 添加ul元素到box内部
    box.appendChild(ul);
    // 根据数组的项数往ul添加数据
    for(var i = 0;i<names.length;i++){
      // 每次都要新生成一个li标签元素添加到ul内部
      var li = document.createElement("li");
      ul.appendChild(li);
      // 给每个生成的li添加内容
      li.innerText = names[i];
    }
  </script>
</body>
</html>

节点案例二：动态创建表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
        border-collapse: collapse;
    }
    thead{
        background-color: #ccc;
    }
    th,td{
        width: 100px;
        height: 40px;
        text-align: center;
    }
  </style>
</head>
<body>
  <h1>动态创建表格</h1>
  <table id="wrap" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">

    </tbody>
  </table>
  <script src="common.js"></script>
  <script>
    // 获取元素
    var tb = my$("tb");
    // 模拟后台传输的数据
    var datas = [
      {name:"张三",subject:"语文",score:"90"},
      {name:"李四",subject:"数学",score:"80"},
      {name:"王五",subject:"英语",score:"70"},
      {name:"刘备",subject:"物理",score:"60"},
      {name:"曹操",subject:"生物",score:"87"},
      {name:"孙权",subject:"化学",score:"100"}
    ];
    // 根据数组中的数据个数，生成对应个数的tr
    // 将生成的tr添加到tbody中
    // 数组遍历
    for(var i =0;i < datas.length; i++){
      // 每一个数据生成tr
      var tr = document.createElement("tr");
      tb.appendChild(tr);
      // 每一个tr中还需要添加对应的td
      // 每一行内部的td中的数据来自于datas数组的每一项
      var data = datas[i];// {name:"张三",subject:"语文",score:"90"}
      // 遍历data对象，根据他的项数确定添加td的个数
      for(var k in data){
        // 生成一个td
        var td = document.createElement("td");
        // 添加到tr中去
        tr.appendChild(td);
        // 添加给每一个td的数据
        td.innerText = data[k];
      }
      // 除了前面动态获取的数据td之外，还有一个删除的操作的td
      td = document.createElement("td");
      // 添加到tr中蛆
      tr.appendChild(td);
      // 最后一个td中需要添加一个a标签
      var a = document.createElement("a");
      a.innerText = "删除";
      a.href = "javascrpit:void(0)";
      // 将a添加到td中
      td.appendChild(a);
      // 给新生成的每个a添加一个点击事件，移除当前所在的行
      a.onclick = function(){
        // 找到所在的行的tr
        // 移除
        tb.removeChild(this.parentNode.parentNode);
      }

    }
  </script>
</body>
</html>

节点案例三：选择水果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    select {
      width: 200px;
      height: 200px;
      background-color: #33cccc;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <select id="all" size="5" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="choose" multiple="multiple">
  </select>

  <script src="common.js"></script>
  <script>
    // 获取元素
    var all = my$("all");
    var choose = my$("choose");
    var btn1 = my$("btn1");
    var btn2 = my$("btn2");
    var btn3 = my$("btn3");
    var btn4 = my$("btn4");
    // 给第一个按钮添加点击事件，让all中的所有子元素移动到choose中
    btn1.onclick = function(){
      // 获取all中所有的子元素
      var opts = all.children;//内部的元素都是动态添加的
      // 所以要获取最开始的数组的个数
      var n = opts.length;
      // 将所有的opts的元素添加到choose
      // 因为是动态变化的，所以每次取出的都是下标为0的元素
      for(var i = 0;i < n; i++){
        choose.appendChild(opts[0]);
      }
    };
    // 从choose全部退还到all是同理
    btn2.onclick = function(){
      var opts = choose.children;
      var n = choose.length;
      for(var i = 0;i < n;i++){
        all.appendChild(opts[0]);
      }
    };
    btn3.onclick = function(){
      var opts = all.children;
      // 移动的内容希望可以是固定的一个数组的项
      var arr = [];
      // 通过判断条件可以往arr中添加需要移动的元素
      for(var i =0 ; i<opts.length;i++){
        if(opts[i].selected === true){
          arr.push(opts[i]);
        }
      }
      console.log(arr);
      // 对需要移动的固定数组进行遍历
      for(var j = 0;j<arr.length;j++){
        choose.appendChild(arr[j]);
        arr[j].selected = false;
      }
    };
    btn4.onclick = function(){
      var opts = choose.children;
      // 移动的内容希望可以是固定的一个数组的项
      var arr = [];
      // 通过判断条件可以往arr中添加需要移动的元素
      for(var i =0 ; i<opts.length;i++){
        if(opts[i].selected === true){
          arr.push(opts[i]);
        }
      }
      console.log(arr);
      // 对需要移动的固定数组进行遍历
      for(var j = 0;j<arr.length;j++){
        all.appendChild(arr[j]);
        arr[j].selected = false;
      }
    };
  </script>
</body>

</html>

思考：动态添加数据的话怎么修改？