DOM
DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。
节点：元素节点element，属性节点attribute，文本节点text
获取DOM元素
document:文档的意思，代表浏览器内部的最大的区域。代表整个的html文件。
获取document对象：document
获取html元素对象：document.documentElement
获取body元素对象：document.body
获取head,title：document.head / document.title
getElementById()： 获取特定 ID 元素的节点--最优
getElementsByTagName()：通过标签名获取元素，获取相同元素的节点列表，返回类数组，使用[下标]来获取（没有下标就是集合）
getElementsByClassName()： 获取相同类名的节点列表（IE8及以下不支持），返回类数组
querySelector()：获取一个， 通过选择器获取元素，如果获取多个只返回第一个。
querySelectorAll()：获取多个， 通过选择器获取元素，可同时获取多个元素，类数组。
获取DOM属性
三个方法操作默认属性以及自定义的属性。
自定义属性：自己定义的用于传输数据的属性。
getAttribute()获取特定元素节点属性的值，某些低版本浏览器不支持
setAttribute()设置特定元素节点属性的值，某些低版本浏览器不支持
removeAttribute()移除特定元素节点属性，某些低版本浏览器不支持
innerHTML：读写元素节点里的内容，从节点的起始位置到终止位置的全部内容,包括内部的元素。
outerHTML：读写元素节点里的内容，除了包含innerHTML的全部内容外, 还包含元素节点本身。
innerText：读写某个元素节点的文本内容
DOM节点
DOM 就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点
DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
比如我们标签里面写的文字，那么就是文本节点
比如写在每一个标签上的属性，就是属性节点
获取DOM节点
document.querySelector()/document.querySelectorAll()：获取标签节点
childNodes：获取某一个节点下所有的子一级节点,包含空白节点(文本节点)，类数组。
children ：获取某一节点下所有的子一级 元素节点，不包含空白节点，类数组。
获取子节点
firstChild：获取某一节点下子一级的第一个节点,包含空白节点
firstElementChild：获取某一节点下子一级 第一个元素节点，不包含空白节点
lastChild：获取某一节点下子一级的 最后一个节点
lastElementChild：获取某一节点下子一级 最后一个元素节点
nextSibling：获取某一个节点的下一个兄弟节点, 包含空白节点
nextElementSibling：获取某一个节点的 下一个元素节点, 不包含空白节点
parentNode：获取某一个节点的 父节点
getAttributes：获取某一个元素节点的所有属性节点
节点属性
节点：元素节点，属性节点，文本节点...
每一个节点又包含三个属性。
nodeType：获取节点的节点类型，用数字表示 1元素 2属性 3文本
nodeName：获取节点的节点名称
nodeValue： 获取节点的值
节点操作
查找元素
document.querySelector()
document.querySelectorAll()
创建元素-createElement('创建的标签名')
追加元素-appenChild()
格式: 父元素.appendChild(创建的元素)将创建的元素追加到父元素内部的最下面。
DOM.insertBefore(新的节点, 存在的节点) 在box内，把新的节点节点插入到存在的节点的前面
DOM.removeChild(node) 删除box内部的子节点
DOM.cloneNode() 克隆obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。
获取元素的非行间样式
getComputedStyle(标准浏览器) || currentStyle(IE 浏览器)
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器(标准浏览器)，一个在 IE 浏览器
window.getComputedStyle(oBox)['width']||Obj.currentStyle.width
设置css属性和值
逐个添加-注意单位
Obj.style.width = '200px'
整体添加-用css文本的形式
Obj.style.cssText = '正常的css代码';
所有设置的css属性都将添加到元素(标签)的行间样式，优先级是比选择器要高。
利用js提供的属性获取常见css值
offsetLeft 和 offsetTop 值是没有单位。
获取的是元素左边的偏移量和上边的偏移量(盒子相对于页面的距离)
嵌套，如果父级有定位，以父级为基准。如果父级没有定位，以html为基准
offsetWidth 和 offsetHeight 盒模块的宽高。没有单位
获取元素 内容宽高 + padding宽高 + border宽高 的和