childNodes 包括文本节点
节点分成三类:标签 属性和文本
节点的类型 nodeType
1、元素的节点
2、属性节点
3、文本节点
节点的名字 nodeName
元素节点:标签名称
属性节点:属性名称
文本节点:#text
节点值 nodeValue
元素节点的nodevalue始终是null
属性的nodeValue的属性值
如果是文本返回的文本的内容
兄弟(姐妹)节点
下一个兄弟(姐妹)节点:
nextSibling:下一个紧邻节点,谷歌、火狐都支持,只不过有可能会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到。
nextElementSibling:谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持。
previousSibling
previousElementSibing
节点的层次
父节点:parentNode
子节点:
childNodes 标准的DOM属性,获取子标签以外,还会获取文本节点,但是IE8中会忽略空白
childen 不是标准的DOM属性,但是所有的浏览器都支持,只会返回元素节点
兄弟节点
nextSibling 下一个兄弟节点,可能是费元素节点,IE8是元素节点
previousSibling
previousElementSibling 上一个兄弟节点 IE8及之前不支持
nextElementSibling 下一个兄弟节点
第一个和最后一个子节点
firdtChild
laseChild
firstElementChild
lastElementChild
以下是对节点的小结 (这个小结是从朋友那直接拿过来的,望朋友勿怪哦!)
nextSibling 与 nextElementSibling 下一个兄弟节点
previousSibling 与 previousElementSibling 上一个兄弟节点
firstChild 与 firstElementChild 第一个子节点
lastChild 与 lastElementChild 最后一个子节点
element.nextSibling element.previousSibling
element.firstChild element.lastChild
//FF 获得的是文本节点 //IE 获得的是元素节点
Boolean(element.nextSibling) Boolean(element.previousSibling)
Boolean(element.firstChild) Boolean(element.lastChild)
//FF true //IE true
element.nextElementSibling element.previousElementSibling
element.firstElementChild element.lastElementChild
//FF 获得的是元素节点 //IE 获得的是undefined
Boolean(element.nextElementSibling) Boolean(element.previousElementSibling)
Boolean(element.firstElementChild) Boolean(element.lastElementChild)
//FF true //IE false
想做个被大神提携的小小程序员。