节点的层次结构

nodeType节点的类型

1 元素节点　　//nodeType=1

2 属性节点

3 文本节点　　//nodeType=3

4 注释节点　　//nodeType=8

nodeName 节点的名称（标签名称）

nodeValue 节点值

　　元素节点的nodeValue始终是null

父子结构：

父：parentNode　　//父节点只有一个，所以不加s　　　　获取父节点：box.parentNode

子：childNodes　　//一般子节点有很多，所以是复数　　　获取子节点：box.childNodes

兄弟节点：　　下一个兄弟节点：box.nextSibling　　上一个兄弟节点：box.previousSibling　　　　下一个兄弟元素：box.previousSibling，如果当前元素已经是最后一个，就返回null　　上一个兄弟元素：box.previousSibling 

子元素：children

判断当前子节点是否为元素节点：nodeType属性为1

<div id="box" age=12>
    <span>123</span>
    <!-- sdsd? -->
</div>
<script type="text/javascript">
    var box = document.getElementById('box');  
    //判断当前节点是否为元素节点
        for(i=0,i<box.childNodes.length,i++){
              node = box.childNodes[i];
              if(node.nodeType === 1){
                    console.log(node)     
              }
         }
</script>

只 获取所有子元素：

box = document.getElementById('box');
console.log(box.children)

获取第一个子节点：box.firstChild　　　　//包含文本节点

获取第二个子节点：box.lastChild　　　　//包含文本节点

获取第一个子元素：box.firstElementChild　　//需处理兼容性问题

var ul = getFirstElementChild()

void 是运算符，执行void后面的表达式，并始终返回undefined

<a herf="javascript : void(0)"></a>

来源：https://www.cnblogs.com/xiaoyuheng/p/14856317.html