DOMJ节点关系（二）

三、兄弟节点

1.previoursSibling

获取该节点的上一个兄弟元素。在IE浏览器中可以使用

2。previoursElementSibling

获取该节点的上一个兄弟元素。在非IE浏览器中可以使用

3.nextSibling

获取该节点的下一个兄弟元素。在IE浏览器中可以使用

4.nextElementSibling

获取该节点的下一个兄弟元素。在非IE浏览器中可以使用

解决浏览器的兼容

var oPrevious=oLi.previousElementSibling||oLi.previousSibling;

var oLast=oLi.nextElementSibling||oLi.nextSibling;

window.onload=function(){

var oLi=document.getElementById("li1");

var oPrevious=oLi.previousElementSibling||oLi.previousSibling;

oPrevious.style.background="red";

var oLast=oLi.nextElementSibling||oLi.nextSibling;

oLast.style.background="yellow";

}

111

222

333

上述代码实现将id为“li1”的上一个兄弟节点背景颜色设置为红色。下一个兄弟节点的背景颜色设置为黄色。

四、nodeName：节点的名称

元素节点的nodeName 与标签名相同

属性节点的nodeName 与属性名相同

文本节点的nodeName 始终是 #text

文档节点的nodeName 始终是 #document

五、nodeValue：节点值

元素节点的nodeValue 是 undefined 或 null

文本节点的nodeValue 是文本本身

属性节点的nodeValue 是属性值

nodeValue 属性对于文档节点和元素节点是不可用的。

console.log(oLi.nodeName); // LI

console.log(oLi.nodeValue);// null