1、访问父节点
parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null
<div id="box"><p id="hello">hello world!</p></div><script>var hello=document.getElementById("hello");console.log(hello.parentNode.nodeName); //DIV</script>
2、访问所有子节点
childNodes： NodeList 类型，返回指定节点的所有子节点，可以看作是类数组对象，可以使用 length 属性来确定子节点的数量
<div id="box"><p>hello world!</p><p>today is Sunday.</p></div><script>var box=document.getElementById("box");console.log(box.childNodes.length); //5</script>
3、访问第一个子节点
firstChild：Node 类型，返回指定节点的第一个子节点，注意空白文本节点
<div id="box"><p id="hello">hello world!</p><p>today is Sunday.</p></div><script>var box=document.getElementById("box");console.log(box.firstChild.nodeName); //#textvar firstChild=getFirstChildNode(box);console.log(firstChild.nodeName); //p//通过判断nodeType的值是否为1,如果是则为元素节点,否则跳过。//获取当前元素节点的第一个子节点,过滤空白文本节点function getFirstChildNode(box){if(box.firstChild.nodeType!=1){return box.firstChild.nextSibling;}else{return box.firstChild;}}</script>
4、访问最后一个子节点
lastChild：Node 类型，返回指定节点的最后一个子节点，注意空白文本节点
<div id="box"><p id="hello">hello world!</p><p>today is Sunday.</p></div><script>var box=document.getElementById("box");console.log(box.lastChild.nodeName); //#textvar lastChild=getLastChildNode(box);console.log(lastChild.nodeName); //p//获取当前元素节点的最后一个子节点,过滤空白文本节点function getLastChildNode(box){if(box.lastChild.nodeType!=1){return box.lastChild.previousSibling;}else{return box.lastChild;}}</script>
同理
5、访问下一个兄弟节点
nextSibling： Node 类型，返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。
6、访问前一个兄弟节点
previousSibling：Node 类型，返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。
7，获取所有兄弟节点
function siblings(elm){var a = []; //保存所有兄弟节点var p = elm.parentNode.children; //获取父级的所有子节点for(var i = 0; i < p.length; i++){//循环if(p[i].nodeType == 1 && p[i] != elm){//如果该节点是元素节点与不是这个节点本身a.push(p[i]);// 添加到兄弟节点里}} return a;}var sibling = siblings(div);for(var j = 0; j < sibling.length; j++){sibling[i].style.width = "200px" //这样就可以对所有的兄弟节点执行你需要的操作了}
汇总小结：
1、parentElement获取父元素节点
var box=document.getElementById(“box”).parentElement;
parentElement返回指定元素的上级元素节点，如果没有上级元素返回null。
2、children获取所有子元素节点
var childs=document.getElementById(“box”).children;
返回一个数组，children ie6-8支持但返回元素节点和注释节点，ie9以上版本返回元素节点，其他浏览器支持
3、firstElementChild获取第一个子元素节点
var first=document.getElementById(“box”).firstElementChild;
返回父元素的第一个子元素节点，如果没有则返回null。ie9以上版本支持
4、lastElementChild获取最后一个子元素节点
var last=document.getElementById(“box”).lastElementChild;
返回父元素的最后一个子元素节点，如果没有则返回null。ie9以上版本支持
5、nextElementSibling获取下一个兄弟元素节点
var next=document.getElementById(“box”).nextElementSibling;
返回当前元素紧跟着的元素节点，如果没有则返回null。ie9以上版本支持
6、previousElementSibling获取前一个兄弟节点
var prev=document.getElementById(“box”).previousElementSibling;
返回当前元素的前一个元素节点，如果没有则返回null。ie9以上版本支持
