DOM基础操作

查找：
el.childNodes：子节点

el.children：子元素（不是 标准中的操作）
el.lastElementsChild：最后一个子元素
el.firstElementsChild：第一个子元素

el.parentNode：父元素（父节点）
el.nextElementSibling：下一个兄弟元素（IE不支持）
el.nextSibling：下一个兄弟节点，包括空白节点，不常用（IE不支持）
el.previousElementSibling：上一个兄弟元素（IE不支持）
el.previousSibling：上一个兄弟节点，包括空白节点，不常用（IE不支持）

添加：
object = document.creatElement('tagName');
元素创建完，不添加到页面中的话 看不到

el.appendChild(object) （在el中添加object在末尾）
如果操作的是一个已经存在页面中的元素，会把元素从原来的父级下剪切过去

el.insertBefore(object1,object2) （在el中添加object1在object2前面）
如果操作的是一个已经存在页面中的元素，会把元素从原来的父级下剪切过去

删除：
el.removeChild(childNodes[num]) （从一个节点中删除指定的节点，返回值，被删除的节点）

定位：
el.offsetParent 定位父级
el.offsetWidth/offsetHeight 可视宽、高（width+padding+border）
box.clientWidth/clientHeight （ width + padding）
el.offsetTop/offsetLeft 和父级之间的偏移（和定位父级之间的距离）
el.clientTop （元素的边框）

el.getBoundingClientRect()
获取元素的盒模型信息
返回值对象
{
left：元素左侧相对于可视区左侧的距离
top：元素上侧相对于可视区顶部的距离
right：元素右侧相对于可视区左侧的距离
bottom：元素下侧相对于可视区顶部的距离
width：可视宽度
height：可视高度
}

属性操作的三种方法：（注意：尽量不要使用或者减少使用dom的操作，性能不太好）
node.getAttribute(attr)
获取元素制定属性名的属性值
node.setAttribute(attr)
设置元素制定属性名的属性值
node.removeAttribute(attr)
移除元素制定属性名
特点：
可以操作行间自定义的属性
可以获取src、href等的相对地址

parentNode.replaceChild(node,childNode)
node用来替换的节点，childNodes被替换的子节点
两个参数都必须写。
node.cloneNode(boolean)
克隆一个节点
true：克隆元素和元素包含的子孙节点
flase：克隆元素但不包含元素的子孙节点

el.dataset.属性名 获取data自定义属性