节点操作是利用父子兄节点关系获取元素，逻辑性强，但是兼容性稍差。

节点至少拥有节点类型（nodeType）、节点名称（nodeName）和节点值（nodeValue）这三个属性。

元素节点 nodeType为1；属性节点 nodeType为2；文本节点 nodeType为3（文本节点包含文字、空格、换行等）

一、节点层级

1、父节点    parentNode

element.parentNode   就可以得到父节点对象，最近的一个

<div class="father">

        <div class="son"></div>

</div>

<script>

        var box = document.querySelector(".son")    

        box.parentNode                //获取box 的父节点

</script>

2、子节点    children

（1）element.childNodes   返回所有的子节点，包含元素节点和文本节点（换行），可以通过节点类型（nodeType）+for循环筛选。

（2）children   返回元素节点，最常用

（3）firstChild   返回第一个子节点，不管是文本节点还是元素节点

（4）lastChild   返回最后一个子节点，不管是文本节点还是元素节点

（5）firstElementChild   返回第一个元素子节点

（6）lastElementChild    返回最后一个元素子节点

3、兄弟节点    nextSibling

（1）element.nextSibling    下一个兄弟节点，包含元素节点或者文本节点（换行）

（2）previousSibling    上一个兄弟节点，包含元素节点或者文本节点（换行）

（3）nextElementSibling    下一个元素兄弟节点

（4）previousElementSibling    上一个元素兄弟节点

二、创建和添加节点

1、创建节点    document.createElement('HTML元素')

document.createElement('tagName')    方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

2、添加节点    父节点.appendChild(child)

node.appendChild(child)    方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面的after伪元素。

node.insertBefore(child,指定子节点)    方法将一个节点添加到父节点的指定子节点前面。

三、删除节点

父节点.removeChild(child)    方法删除一个子节点，返回删除的节点。

四、复制节点（克隆节点）

1、克隆节点    复制的目标节点.cloneNode()

（1）括号为空或者里面是false，浅拷贝，只复制标签，不赋值里面的内容。

（2）cloneNode(true) 括号里面为true，深拷贝，复制标签以及里面的内容。

2、添加节点    父节点.appendChild(child)

五、三种动态创建元素的方法（了解）

1、document.write()    是直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘。重新绘制一个新的HTML页面。

document.write('<div></div>')

2、element.innerHTML    创建多个元素效率更高，但不要拼接字符串，要采用数组的方式 

3、document.createElement()    创建多个元素效率会稍微低一些，但是结构更清晰。