WebAPI(part8)--节点操作

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

文章目录

节点操作
- 节点概述
- 节点层级
- - 父节点
  - 子节点
  - 兄弟节点
- 创建节点
- 删除节点
- 复制节点
- 创建元素三种方式

节点操作

节点概述

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

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

一般地，节点至少拥有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>