JS获取子节点、父节点和兄弟节点

在电话面试时被问到，当时回答的是不记得了，只能说多积累吧，基础要打牢
节点：

• 元素节点：如 body table div等等
• 文本节点：任意的文字、空格、换行、空白行
• 属性节点：其节点的属性
• 注释节点：注释

【一】获取子节点

1. 通过获取dom方式直接获取子节点
2. 通过childNodes集合，获取子节点（元素几点 + 文本节点）
   使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。
   【可以通过正则表达式过滤】

var b =document.getElementById("test").childNodes;

不建议使用childNodes方法
硬要使用这个方法，也可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，nodeType==2是属性节点，nodeType==3是文本节点。因此我们可以通过这样判断：

if (nodes.childNodes[i].nodeType == 1) {
    // nodes.childNodes[i] 是元素节点
}

3. 通过children数组，来获取子节点（元素节点）
   利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

 var getFirstChild = document.getElementById("test").children[0];

4. 获取第一个子节点：firstChild（元素几点 + 文本节点）
   firstChild获取第一个子元素，但是在有些情况下我们打印的时候会显示undefined，这是什么情况呢？？其实firstChild和childNodes是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。
5. 获取第一个子节点：firstElementChild（元素节点）
6. 获取最后一个子节点：lastChild，lastElementChild

【二】获取父节点

1. 获取当前元素的直接父元素：parentNode(w3c，元素节点+文本节点)，parentElement（ie，元素节点）
2. 获取所有父节点：offsetParent

【三】获取兄弟节点

1. 获取父亲节点再获取子节点来获取兄弟节点

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

2. 获取上一个兄弟节点：previousSibling（元素几点 + 文本节点），previousElementSibling（元素节点）
3. 获取下一个兄弟节点：nextSibling，nextElementSibling

参考：【JavaScript】JS获取子节点、父节点和兄弟节点的几种方式，附CSS组合选择器