childNodes 包括文本节点
节点分红三类:标签 属性和文本
节点的类型 nodeType
一、元素的节点
二、属性节点
三、文本节点
节点的名字 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