JavaScript学习之DOM（节点、节点层级、节点操作）

目录
节点
概念
节点的属性
节点层级
概念
节点操作
创建新节点
增添和删除节点
复制节点
练习
节点
概念
一个页面就是一个节点树，页面中的内容就是节点。

例如：HTML文档可以看作是一个节点树，网页中的所有内容都是节点。

节点的属性
(1)节点类型(nodeType)

A、1表示为元素节点(即标签)

B、2表示为属性节点(标签的属性)

C、3表示为文本节点(标签的内容)，文本节点包括文字、空格、换行等

(2)节点名称(nodeName)

(3)节点值(nodeValue)

节点层级
概念
一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。

(1)节点之间的层级关系：

段落...

父节点：指的是某一个节点的上级节点

子节点：指的是某一个节点的下级节点

兄弟节点：两个节点同属于一个父节点(p标签和a标签就是兄弟节点)

(2)获取父节点的方式：
parentNode属性：来获得离当前元素的最近的一个父节点

(3)获取子节点、子元素的方式：

A、childNodes属性：返回当前节点的所有子节点的集合,返回的节点包括元素、文本和其他节点

B、children属性：只返回子元素节点的集合(标签的集合)

C、firstChild属性：返回第一个子节点(元素节点或文本节点)

D、firstElementChild属性：返回第一个子元素（第一个子标签）

E、lastChild属性：返回最后一个子节点(元素节点或文本节点)

F、lastElementChild属性：返回最后一个子元素）（最后一个子标签）

obj.children[0] // 获取第一个子元素节点
obj.children[obj.children.length - 1] // 获取最后一个子元素节点
1
2

(4)获取兄弟节点、兄弟元素的方式

A、nextSibling属性：返回后一个兄弟节点

B、previousSibling属性：返回前一个兄弟节点

C、nextElementSibling属性：返回下一个兄弟元素

D、previousElementSibling属性：返回前一个兄弟元素

节点操作
创建新节点
(1)通过createElement创建元素节点(创建标签)；

通过createTextNode创建文本节点

(2)补充：

动态创建元素节点的3种常见方式如下：

document.write()创建元素，如果页面文档流加载完毕，再调用会导致页面重绘

element.innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

document.createElement()创建多个元素效率稍微低一点，但是结构更加清晰

增添和删除节点
appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾

insertBefore(child, 指定元素)方法，将一个节点添加到父节点的指定子节点前面

removeChild(child)用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点

复制节点
cloneNode(deep)
1
注意：
deep是逻辑值，true表示深拷贝,即复制当前节点及其所有子节点(默认值)

false表示浅拷贝，只复制当前节点不复制其子节点。

练习

插入节点

————————————————
作者：星河梦~