节点操作

var box = document.querySelector('box');
       // 找到离元素最近的父级元素（亲爸爸），找不到就返回null
       console.log(box.parentNode);
       //返回的是当前节点的子节点集合，包括元素节点，文本节点，是实时更新的
       // 不常用
       console.log(box.childNodes);
       // 可以筛选出来
       for (var i = 0; i < box.childNodes.length; i++) {
           if (box.childNodes[i].nodeType === 1) {
               // 类型是1就是元素节点
               console.log(box.childNodes[i]);
           }

       }
       // 返回第一个子节点，不管是文本节点还是元素节点
       console.log(box.firstChild);
       // 返回最后一个子节点，不管是文本节点还是元素节点
       console.log(box.lastChild);

       // 常用方法,只读，只返回子元素节点。
       console.log(box.children);

       // 返回第一个子元素节点，找不到返回null,ie9以上支持
       console.log(box.firstElementChild);

       // 返回最后一个子元素节点，找不到返回null，ie9以上支持
       console.log(box.lastElementChild);

       // 返回下一个兄弟节点，找不到返回null，包含所有节点
       console.log(box.nextSibling);
       // 返回上一个兄弟节点，找不到返回null，包含所有节点
       console.log(box.previousSibling);


       // 返回下一个兄弟元素节点，找不到返回null，ie9以上支持
       console.log(box.nextElementSibling);
       // 返回下一个兄弟元素节点，找不到返回null，ie9以上支持
       console.log(box.previousElementSibling);

       // 封装一个函数
       function GetElementSibling(element) {
           var el = element;
           while (el = el.nextSibling) {
               if (el.nodeType === 1) {
                   return el;
               }
           }
           return null;
       }

       // 创建一个名字是maName的HEML元素，原先不存在，所以叫动态创建元素节点
       document.createElement('myName');
       // 添加一个节点在指定父节点的子节点列表末尾，类似css中的after伪元素
       box.appendChild('bbox');
       // 把bbox添加到box1前面,类似befor伪元素
       box.insertBefore('bbox', box1);

       // 删除第二个子元素
       box.removeChild(box.children[1]);

       // 拷贝节点
       // 括号参数为空或者false，是浅拷贝，只克隆节点本身，不包括子节点
       // 括号参数问真，深拷贝，克隆节点及所有子节点
       box.cloneNode();