原生JS获取节点元素

获取子节点

通过children来获取子节点

<div id="test">
    <span>111<cite>444</cite></span>
    <em>222</em>
    <p>333</p>
</div>

<script type="text/javascript">
    var childs = document.getElementById("test").children;
    console.log(childs)
    // HTMLCollection [span em p ]
</script>

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

var firstChild = document.getElementById("test").children[0];
// span

获取第一个、最后一个子节点

使用firstElementChild来获取第一个子元素的时候，这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

var first =  document.getElementById("test").firstElementChild;
console.log(first) // span

var last = document.getElementById("test").lastElementChild; // 最后一个子节点

特别注意

通过childNodes、firstChild、lastChild获取的子节点会遇到问题。比如firstChild来获取第一个子元素，但是在有些情况下我们打印的时候会显示undefined，这是什么情况呢？？其实firstChild和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]);
  }
}
console.log(b) // NodeList[span em p]

获取父节点的方式

parentNode获取父节点（w3c的标准）

<section id="f2">
       <article id="f1">
           <div id="test"></div>
       </article>
</section>

var p = document.getElementById("test").parentNode;
console.log(p) // article id = f1

获取兄弟节点

获取上一个兄弟节点

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

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

获取下一个兄弟节点

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。

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