什么是节点?
节点就像一颗大树的枝干与树叶,不同的节点对应了不同的功能,比如一颗大树的主干能够支撑起它的枝干,而它的枝干能够生长出树叶,无数的枝干与树叶构成了一颗完整的大树,人常说艺术源于生活,程序也是一门艺术,它本是死气沉沉的,是人的想象力让它有了色彩。
DOM 节点常用的属性
- childNodes
- nodeType
- nodeValue
- firstNode
- lastNode
有了节点,就会有节点所对应的属性,改变这些属性能得到不同的行为和结果
childNodes
childNodes 是一个数组,它包含了某个元素下对应的子节点,虽然这些子节点不一定是对网页的表现力有用,但是在编写中对人是必须的。例如输出 head 节点下的子节点
var head_element = document.getElementsByTagName('head')[0];
console.log(head_element.childNodes);
这些子节点不仅包括元素节点、属性节点、文本节点还有一些换行符和空格。
所以 childNodes 属性能够获取任何一个元素的所有子节点(虽然有些并不是有用的)
nodeType
nodeType 获取的是某一个元素的类型,它一共有12种可取的值,但有用的,或者说有具体表现力只有3种。
- 元素节点(nodeType = 1)
- 属性节点(nodeType = 2)
- 文本节点(nodeType = 3)
w3c: nodeType所有值
nodeValue
nodeValue 能够改变文本节点的值,值得注意的是如果使用 node.nodeValue,通常情况下返回值为 null,所以需要使用 node.childNodes[0].nodeValue 来获取 p 元素的文本节点
<p>Hello, world</p>
firstChild
node.childNodes[0] 价等于 node.firstChild
lastChild
node.childNodes[node.childNodes.length - 1] 价等于 node.lastChild