获取元素、节点关系

<button name="btn" class="btn" id="btn">点我</button>
    <script>
        window.onload = function (ev) {
            var btn1 = document.getElementById('btn');
            var btn2 = document.getElementsByClassName('btn')[0];
            var btn3 = document.getElementsByTagName('button')[0];
            var btn4 = document.getElementsByName('btn')[0];

            var btn5 = document.querySelector('#btn');//只查找一个，即使后面还有也不会查找 button 类名 Id名
            var btn6 = document.querySelectorAll('#btn')[0];

            console.log(btn1);
            console.log(btn2);
            console.log(btn3);
            console.log(btn4);
            console.log(btn5);
            console.log(btn6);
        }
    </script>

 // 获取父节点
    window.onload = function (ev) {
        var a = document.getElementsByTagName('a')[0];
        console.log(a.parentNode.parentNode);
    }

 // 获取兄弟节点
    var span = document.getElementById('span');
    // 下一个
    var nextEle = span.nextElementSibling || span.nextSibling;
    console.log(nextEle);

    // 上一个
    var preEle = span.previousElementSibling || span.previousSibling;
    console.log(preEle);

   var box = document.getElementById('box');
   // 获取第一个子节点
   console.log(box.firstElementChild || box.firstChild);
   // 获取最后一个子节点
   console.log(box.lastElementChild || box.lastChild);
   // 获取所有的节点
   console.log(box.childNodes); //兼容所有
   console.log(box.children);   //有兼容问题

window.onload = function (ev) {
        // 1. 获取标签
        var box = document.getElementById('box');
        // 2. 获取标签内部的所有节点
        var allNodeLists = box.childNodes;
        // 3. 过滤元素节点
        var newListArr = [];
        allNodeLists.forEach(function (value, key, parent) {
            // console.log(value.nodeType);
            if(value.nodeType === 1){  //判断文本类型，分类1 2 3
                newListArr.push(value);
            }
        });

        console.log(newListArr);
    }