在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="http://maxiuli.com">我的博客</a>
//<a>是一个元素节点,“我的博客”是文本节点,href是属性节点
</body>
</html>

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