在 HTML DOM 中,所有的事物都是节点。DOM 是被视为节点树的 HTML

为什么说是 DOM 节点树呢~?看图

其实很好理解就是根上有树干,树干上有树枝,树枝再生树枝,但这是一个倒过来的树

根据 W3C 得 HTML DOM 标准,HTML 文档中所有内容都是节点


  • 整个文档是一个文档节点

  • 每个HTML元素都是元素节点

  • HTML元素里的文本是文本节点

  • 每个HTML属性是属性节点

  • 注释是注释节点

节点的属性

innerHTML 属性

这个就是获取元素的内容,比较好理解,可以查看之前写的JS 获取节点文本对比理解

nodeName 属性

nodeName 属性规定节点的名称.
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是#document

nodeValue 属性

nodeValue 属性规定节点的值
元素节点的 nodeValue 是 undefi 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性

元素类型 —> NodeType
  元素  —>1
  属性  —>2
  文本  —>3
  注释  —>8
  文档  —>9

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
//整个文档是个文档节点
<html>
<head> // 在<html>里的标签元素都是元素节点
<title>DOM 节点</title>
//<title>是一个元素节点,“DOM节点”是文本节点
</head>
<body>
<h1>DOM 第一课</h1>
<a href="https://maxiuli.com">我的博客</a>
//<a>是一个元素节点,“我的博客”是文本节点,href是属性节点
</body>
</html>

文章是找资料自己写的,有不对的地方请指正~maxiuli95@Gmail.com