常用DOM操作【二】

一.获取子节点
1.获取子节点

var a = document.getElementById("test").getElementsByTagName("div");

2.通过childNodes获取子节点
使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。
过滤空白文本节点

var b =document.getElementById("test").childNodes;
for(var i=0; i<b.length;i++){
    if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
        document.getElementById("test").removeChild(b[i]);
    }
}

3.Ele.children 最方便的，不需要过滤就能拿到子节点集合
Ele.children[i] 下标遍历Children

4.firstChild [可以取到空白节点]

5.firstElementChild [取不到空白节点]

6.lastChild [可以取到空白节点]

7.lastElementChild [取不到空白节点]

二．获取父节点
1.offsetParent 获取所有父节点
当前节点获取父节点
2.Ele.parentNode;
3.parentElement ie获取父节点

三.获取同胞节点
1.通过获取父亲节点再获取子节点来获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];

2.获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。
他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。
previousElementSibling则直接匹配节点。

var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

3.获取下一个兄弟节点
同previousSibling和previousElementSibling，nextSibling和
nextElementSibling也是类似的。

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