一.获取子节点
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;