ElementTree 兄弟节点遍历 javascript获取兄弟节点

1.获取子节点

1.获取所有子节点(包含字符，空格和回车节点元素)-childNodes

var allNodesArr=document.getElementById("test").childNodes

使用childNodes获取子节点，返回的是一个子节点集合。是一个数组的格式，并且它会把空格和换行都当做节点数据放在集合内

因此，由于一般我们获取子节点时是不需要这些空格和换行信息的，所以我们需要手动过滤那些不必要的数据。

var allNodesArr=document.getElementById("test").childNodes;
    for(var i=0;i<allNodesArr.length;i++){
        if(allNodesArr[i].nodeName=="#text"&&(/\t/.test(allNodesArr[i].nodeValue)||/\n/.test(allNodesArr[i].nodeValue))){
            document.getElementById("test").removeChild(allNodesArr[i]);
    }
}
//输出打印过滤后的结果
for(var i=0;i<allNodesArr.length;i++){
    console.log(allNodesArr[i])
}

2.获取子节点(不包含字符，空格和回车节点元素)-children

var allNodesArr=document.getElementById("test").children;

利用children可以迅速获取到不包含空格，回车的html节点元素，并且返回结果也是数组格式

3.获取第一个子节点(包含字符，空格和回车)-firstchild

var first=document.getElementById("test").firstchild;

firstChild可以取到元素的第一个子节点，但是和childNodes一样，会将空格，回车当做节点元素返回。

4.获取第一个子节点(不包含字符，空格和回车)firstElementChild

var firstEleChild=document.getElementById("test").firstElementChild;

firstElementChild会直接取到第一个子节点，并且不会将空格，回车纳入子节点的范畴中

5.获取最后一个子节点

lastChild和lastElementChild参考firstChild和firstElementChild

var lastChild=document.getElementById("test").lastChild;
var lastEleChild=document.getElementById("test").lastElementChild;

 

2.获取父节点

1.获取父节点parentNode（w3c）

var parentNode=document.getElementById("test").parentNode;

获取的是当前元素的直接父元素。parentNode是w3c的标准

2.获取父节点parentElement （IE）

var parentNode=document.getElementById("test").parentElement;

获取的是当前元素的直接父元素。parentElement是ie的标准，仅IE下有效，其他浏览器不支持

3.获取所有父节点offsetParent

var bodyBelowNode=document.getElementById("test").offsetParent;

这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。

 

3.获取兄弟节点

1. 通过获取父节点再通过遍历子节点得到兄弟节点

var priviousSiblingNode=parentNode.children[0];

2.获取上一个兄弟节点（包含字符，空格和换行）previousSibling

var previousSibling=document.getElementById("test").previousSibling;

previousSibling会匹配字符，包括换行和空格

3.获取上一个兄弟节点（不包含字符，空格和换行）previousElementSibling

var previousEleSibling =document.getElementById("test").previousElementSibling;

previousElementSibling则直接匹配节点，不会匹配字符，包括换行和空格

4.获取下一个兄弟节点nextSibling、nextElementSibling

参考previousSibling、previousElementSibling

var nextSibling=document.getElementById("test").nextSibling;
var nextELementSibling=document.getElementById("test").nextElementSibling;