DOM树以及DOM的基本用法

一，DOM简介

JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。
整个文档是一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个属性是一个属性节点，注释属于注释节点。

二，DOM元素节点

• nodeName（节点名称） 元素的标签名，返回字符串，以大写的形式表示，只读
• nodeValue（节点值）text节点或Comment节点的文本内容，可读写
• nodeType（节点类型）该节点类型，只读 （返回以上节点类型后面对应的值）
• attributes （属性集合） Element节点的属性集合 ,属性值可以改，但属性名不可以改

一些重要的节点类型

1. 元素 element_node 节点类型 1
2. 属性 attribute_node 节点类型 2
3. 文本text_node 节点类型 3
4. 注释 comment-node 节点类型 8
5. 文档 dpcument_node 节点类型 9

三，DOM的父级元素以及兄弟元素

基于节点

1. parentNodes 父节点
2. childNodes 子节点
3. firstChild 第一个字节点
4. lastChild 最后一个字节点
5. lastChild 后一个兄弟节点
6. previousSibling 前一个兄弟节点

基于元素

1. parentElement 返回当前元素的父元素节点（且IE不兼容）
2. children 返回当前元素的元素子节点
3. firstElementChild 返回的是第一个节点（且IE不兼容）
4. lastELementChild 返回的是最后一个元素节点（且IE不兼容）
5. nextElementSibling 返回后一个兄弟元素节点（且IE不兼容）
6. previousElementSibling 返回前一个兄弟元素节点（且IE不兼容）

来源：CSDN

作者：True_cl

链接：https://blog.csdn.net/True_cl/article/details/103825635