DOM模型与节点
目录1. DOM模型
-
DOM（文档对象模型）就是把文档中的标签，属性，文本转换成对象来管理（类似于Java中的对象）
- document管理了所有的HTML文档内容
- document是一种树结构的文档，有层级关系
- document让我们把所有的标签都对象化
- 我们可以通过document访问所有的标签对象
-
对于一段代码来说，它的Document文档树内存结构可能如下：
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> </head> <body> <a href="https://www.baidu.com/">我的连接</a> <h1>我的标题</h1>> </body> </html> <!-- 根元素:<html> 元素:<head> 元素:<title> 文本:"文档标题" 元素:<body> 元素:<a> 属性:href 文本:"我的连接" 元素:<h1> 文本:"我的标题" -->
2. 节点
-
节点（Node）是构成HTML文档最基本的单元
-
节点分为四类：
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
<p id="pId">This is a paragraph</p> <!-- id="pId"为属性节点 This is a paragraph为文本节点 <p id="pId">This is a paragraph</p>为元素节点 整个HTML文档为文档节点 --> -
节点的属性
有时候根据需要，会获取节点的Name属性，而有时候会获取Value属性
nodeName nodeValue 文档节点 #document null 元素节点 标签名 null 属性节点 属性名 属性值 文本节点 #text 文本内容
2.1 节点的常用方法
childNodes：获取当前节点的所有子节点
- childNodes属性会获取包括文本节点在内的所有节点。也就是说标签之间的空白/换行也会算做节点
- (推荐) children属性可以获取当前元素的所有子元素
firstChild：获取当前节点的第一个子节点
- 存在和childNodes类似的问题
- (推荐) firstElementChild属性可以获取当前元素的第一个子元素
lastChild：获取当前节点的最后一个子节点
- 存在和childNodes类似的问题
- (推荐) lastElementChild属性可以获取当前元素的最后一个子元素
parentNode：获取当前节点的父节点
nextSibling：获取当前节点的下一个节点
- 存在和childNodes类似的问题
- (推荐) nextElementSibling属性可以获取当前元素的下一个兄弟元素
previousSlibling：获取当前节点的上一个节点
- 存在和childNodes类似的问题
- (推荐) previousElementSibling属性可以获取当前元素的上一个兄弟元素