【JavaScript】DOM节点操作

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、节点操作简介

网页中的所有内容都是节点包括标签、属性、文本、注释等，在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问、所有HTML元素(节点)均可被修改，也可以创建或删除。

一般来说，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3(文本节点包含文字、空格、换行等)

在实际开发中、主要操作的是元素节点。

二、使用方法

1.父节点

qrcode元素的父节点是container元素，通过parentNode属性将其获取到。

<div id="container">
  <div id="qrcode"></div>
</div>

<script>
  var qrcode = document.getElementById("qrcode");
  var parent = qrcode.parentNode;
  console.log(parent); // 输出：<div id="container"><div id="qrcode"></div></div>
</script>

2.子节点

通过childNodes属性获取container元素的所有子节点（包括文本节点）。

<div>
        <ul id="container">
            <li>qrcode</li>
            <li>qrcode</li>
            <li>qrcode</li>
        </ul>
    </div>

<script>
  var container = document.getElementById("container");
        var child = container.childNodes;
        console.log(child);
</script>

输出

通过children属性返回一个包含元素所有子元素的HTMLCollection对象。

<div>
        <ul id="container">
            <li>qrcode</li>
            <li>qrcode</li>
            <li>qrcode</li>
        </ul>
    </div>

<script>
  var container = document.getElementById("container");
        var child = container.children;
        console.log(child);
</script>

输出

3.第一个和最后一个元素

firstElementChild用于返回指定元素的第一个元素子节点

 var child = container.firstElementChild;

children[0]获取该对象的第一个元素;常用写法

   <div>
        <ul id="container">
            <li>qrcode1</li>
            <li>qrcode2</li>
            <li>qrcode3</li>
        </ul>
    </div>
    <script>
        var container = document.getElementById("container");
        // var child = container.lastElementChild;
        var child = container.children[0];
        console.log(child);
    </script>

输出

lastElementChild用于返回指定元素的最后一个元素子节点

 var child = container.lastElementChild;

[container.children.length - 1]索引表示数组中的最后一个元素。

var child = container.children[container.children.length - 1];

输出

4.兄弟节点

    <h1>我是h1</h1>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        //获取兄弟节点
        //获取div
        var div = document.querySelector('div');
        //获取下一个兄弟节点
        var span = div.nextElementSibling;
        //获取下一个兄弟节点（包含文本节点）
        var span2 = div.nextSibling;
        // 获取上一个兄弟节点
        var span3 = div.previousElementSibling;
        // 获取上一个兄弟节点（包含文本节点）
        var span4 = div.previousSibling;
        console.log(span, span2, span3, span4);
    </script>

输出

5.替换节点

使用replaceChild方法将div2元素替换为div元素的父节点中的子元素。即div2会取代div在父节点中的位置，div将从DOM树中被移除。

div.parentNode.replaceChild(div2, div);

6.创建和添加节点

 <ul>
        <li>1</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        // 创建节点
        let li = document.createElement('li');
        // 将li元素的文本内容设置为数字0
        li.innerText = '0';
        // 将li元素添加到ul元素的子元素列表中
        ul.appendChild(li);
        // 在指定元素的前面插入一个新元素
        let demo = document.createElement('li');
        ul.insertBefore(demo, ul.children[0]);
        // 将li元素的文本内容设置为数字2
        demo.innerText = '2';
    </script>

7.删除和复制节点

删除节点

// 删除节点
        ul.removeChild(ul.children[0]);

复制节点
cloneNode() 浅拷贝，只复制标签，不复制内容
cloneNode(false)浅拷贝，只复制标签，不复制内容
cloneNode(true)深拷贝，复制标签和里面的内容

var div1 = div.cloneNode();
var div2 = div.cloneNode(false);
var div3 = div.cloneNode(true);

两个按键实现节点的动态添加和删除

<button class="btn">添加</button>
    <button class="btn1">删除</button>
    <ul>
        <li>1</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        let li = document.createElement('li');
        let btn = document.querySelector('.btn');
        btn.onclick = function () {
            let li = document.createElement('li');
            li.innerText = '1';
            ul.appendChild(li);
        }
        // 点击按钮删除节点
        let btn1 = document.querySelector('.btn1');
        btn1.onclick = function () {
            if (ul.children.length > 0) {
                ul.removeChild(ul.children[0]);
            } else if (ul.children.length == 0) {
                alert('没有节点了');
            }
        }
    </script>

实现效果

总结

DOM节点操作主要包括创建节点、添加节点、删除节点、替换节点、复制节点。在实际开发中、主要操作的是元素节点。