HTML 文档中的所有内容都是节点:
- 整个文档document是一个文档节点
- 每个 HTML 元素是元素节点,如<.a href=”#”>超链接</a>
- HTML 元素内的文本是文本节点,如 超链接
- 每个 HTML 属性是属性节点 如href=”#”
- 注释是注释节点
HTML DOM 节点树
Html文档可以看成一课树,比如<HTML>是树的根节点,将 HTML 文档视作树结构。
树中的节点都可以通过js来进行修改,删除 添加等操作
节点之间的关系
拥有层次关系
根节点–顶端的节点 root 他没有父节点
每个节点都有父节点除了根节点
一个节点可以有任意数量的子节点
同胞节点是有相同父节点的节点
比如下面的html文档
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello Dopass!</p>
</body>
</html>
Code language: HTML, XML (xml)
<HTML>没有父节点,因为他是根节点 root
Html节点有两个子节点 head 和body
Head和body的父节点是html
文本节点”hello dopass”的父节点是 p 注意 标签里面的文本内容也是一个节点
所以 title 节点也有一个子节点 就是文本节点 dom教程
H1和p是同胞节点 有些书叫兄弟节点 同时也是body的子节点
Head是html的第一个子节点 body是最后一个子节点
在js中可以通过 innerhtml或者 innertext属性访问文本节点的值