WebAPI(part8)--节点操作-CFANZ编程社区

学习笔记，仅供参考，有错必究

文章目录

节点操作

节点概述
节点层级

父节点
子节点
兄弟节点

创建节点
删除节点
复制节点
创建元素三种方式

节点操作

节点概述

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

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

WebAPI(part8)--节点操作_元素节点

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

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

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

举个例子

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>
</head>

<body>

    <div class="test01">
        我是div
    </div>

    <script>
        var test01 = document.querySelector(".test01")
        console.dir(test01);
    </script>
</body>

</html>

控制台的部分输出：

nodeName: "DIV"
nodeType: 1
nodeValue: null

节点层级

父节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系：

node.parentNode

parentNode属性可返回某节点的父节点，注意！是最近的一个父节点。；

如果指定的节点没有父节点，则返回null.

子节点

获取所有子节点：

parentNode.childNodes

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意，返回值里包含了所有节点，包括元素节点、文本节点等。

如果我们只想获取子元素节点，可以使用如下代码：

parentNode.children

parentNode.children是一个只读属性，返回该节点所有的子元素节点，它只返回子元素节点，其他节点不返回。

第一个子节点：

parentNode.firstChild

最后一个子节点：

parentNode.lastChild

第一个子元素节点(IE9以上)：

parentNode.firstElementChild

最后一个子元素节点(IE9以上)：

parentNode.lastElementChild

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

<ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
</ol>
<script>
    //实际开发的写法  既没有兼容性问题又返回第一个子元素
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);
</script>

兄弟节点

返回当前元素的下一个兄弟节点：

node.nextSibling

返回当前元素的上一个兄弟节点：

node.previousSibling

返回当前元素的下一个元素节点：

node.nextElementSibling

返回当前元素的上一个元素节点：

node.previousElementSibling

创建节点

创建节点：

document.createElement("tagName")

将节点添加到指定父节点的子节点列表的末尾：

node.appendChild(child)

将节点添加到指定父节点的指定子节点的前面：

node.insertBefore(child, 指定节点)

删除节点

该方法从 node节点中删除一个子节点，返回删除的节点。

node.removeChild()

举个例子

<button>删除</button>
<ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
</ul>
<script>
    // 1.获取元素
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // 2. 点击按钮依次删除里面的孩子
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>

复制节点

该方法返回一个节点的副本：

node.cloneNode()

注意，括号中，若填写的参数为false则为浅拷贝，只复制节点本身，不克隆里面的子节点；若为true则为深拷贝，则复制节点本身及节点内的所有子节点。

举个例子

<ul>
    <li>1111</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili);
</script>

创建元素三种方式

document.write()
element.innerHTML
document.createElement()

举个例子

<script>
    // 三种创建元素方式区别 
    // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
    var btn = document.querySelector('button');
    btn.onclick = function() {
        document.write('<div>123</div>');
    }

    // 2. innerHTML 创建元素
    var inner = document.querySelector('.inner');
    for (var i = 0; i <= 100; i++) {
        inner.innerHTML += '<a href="#">百度</a>'
    }
    var arr = [];
    for (var i = 0; i <= 100; i++) {
        arr.push('<a href="#">百度</a>');
    }
    inner.innerHTML = arr.join('');
    // 3. document.createElement() 创建元素
    var create = document.querySelector('.create');
    for (var i = 0; i <= 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
    }
</script>