父节点：Node.parentNode -- 得到最近的父亲节点  没有  返回 null

子节点：

                Node.childNodes -- 得到所有的子节点  元素 文本   ---不提倡使用

                ★★Node.children --获取元素节点  -- 开发使用★★

                Node.firstChild，Node.lastChild -- 获取子节点  文本  元素 ， ie9~

                Node.firstElementChild，Node.lastElementChild -- 获取元素节点 ，ie9~

                ★★Node.children[0]，Node.children[Node.children.length - 1] -- 开发使用★★

兄弟节点：

                Node.nextSibling -- 返回当前节点的下一个节点  没有  返回 null  包括文本  元素 

                Node.previousSibling -- 返回当前节点的上一个节点 没有  返回 null  包括文本  元素

                Node.nextElementSibling -- 返回当前节点的下一个元素节点 没有  返回 null   ie9~

                Node.previousElementSibling -- 返回当前节点的上一个元素节点 没有  返回 null  ie9~

★★封装兼容函数★★

创建节点：

                1.var ele = document.createElement(元素)  

                2.Node.appendChild(ele); 创建 添加  后追加

                3.Node.insertBefore(ele , 指定元素) 前追加

注意 ：1，2     1，3  组合使用

删除节点：Node.removeChild(child)  -- 删除父节点的一个子节点

克隆节点：

                Node.cloneNode() -- () 无参数 或者参数为false  浅拷贝  只复制节点  不克隆节点里面

                Node.cloneNode(true) -- 深拷贝  复制标签  也复制里面的内容

三种动态创建元素点的区别： 

     1.document.write() --  创建元素  缺点：会重绘文档流

     2.innerHTML 是将内容写入某个 Dom节点，不会导致页面全部重绘

     3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式），结构稍微复杂

     4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

             总结：不同浏览器下， innerHTML 的效率要比 creatElement 高