DOM之节点操作
获取父节点
子节点.parentNode 获取离它最近的父节点 找不到返回空
获取子节点
找不到返回null
element.childNodes 获取父元素下的所有子节点，但是会将空格、换行视作文本节点，需要单独处理，很麻烦一般不用
element.children 只获取父元素下的子元素节点，不会获取文本节点，推荐使用。但是兼容性较差
firstChild lastChild 获取父节点下的第一个(最后一个)子节点（不管是元素节点还是文本节点）
firstElemenChild lastElementChild 获取父节点下的第一个(最后一个)元素节点
获取兄弟节点
找不到返回null
element.nextSibling element节点的下一个兄弟节点(包括元素节点、文本节点)
element.previousSibling element节点的上一个兄弟节点(包括元素节点、文本节点)
下面两个方法存在兼容性问题，在IE9以上才支持
element.nextElementSibling element节点的下一个兄弟元素节点
element.preciousElementSibling element节点的上一个兄弟元素节点 如果上一级没有节点返回null
创建、添加、删除、复制节点(通过JS动态调节节点)
创建节点
先创建一个节点，再选择添加到哪个节点内去
createElement("元素节点名")
添加节点
node.appendChild(child) 将创建的子节点child添加到指定的node父节点的节点列表末尾
node.insertBefore(child,指定节点) 将child添加到node父节点中指定子节点的前面
删除节点
node.removeChild(child) 从父节点node中删除子节点 返回删除的节点
复制(克隆)节点
node.cloneNode() 克隆之后还需添加到节点内去
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
var ul=document.querySelector("ul")
var clone=ul.children[0].cloneNode(true)
// var clone=ul.children[0].cloneNode() //cloneNode()括号内为空或false为浅拷贝，只复制元素节点不复制里面的内容，括号内写true为深拷贝，原样复制
ul.insertBefore(clone,ul.children[0])
console.log(ul);
</script>
在用innerHTML和createElement创建大量元素时，效率对比是
innerHTML(数组拼接方式) > createElement > innerHTML(字符拼接方式)
前两种效率都较高，后一种效率很慢
