dom节点的属性
offsetLeft 这个属性是当前元素距离上级父元素的左边距，如果父元素没有定位，则是距离document的左边距！这里说的父级元素并不一定非要是亲生的父级元素，可以一直向上追溯到有定位的父级元素！（offsetTop,offsetBottom,offsetRight 都是一样）
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括滚动条，不包括边框和外边距）
clientHeight //返回元素的高度（包括元素高度、内边距，不包括滚动条，不包括边框和外边距）
clientLeft: 获取对象的border宽度
clientTop：获取对象的border高度
style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
- style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；
- style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
- style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。
当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）
clientX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 不随滚动条滚动而改变；
clientY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 不随滚动条滚动而改变；
pageX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 随滚动条滚动而改变；
pageY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 随滚动条滚动而改变；
screenX 鼠标相对于显示器屏幕左上角x轴的坐标；
screenY 鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX 鼠标相对于事件源左上角X轴的坐标
offsetY 鼠标相对于事件源左上角Y轴的坐标
scrollWidth和scrollHeight 、 scrollTop和scrollLeft
1，scrollWidth实际宽度
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。
2，scrollHeight的实际高度
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
3，scrollTop
scrollTop :内容层顶部 到 可视区域顶部的距离。
实例：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
持续获取高度的方式：
window.addEventListener('scroll', ()=>{\
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;\
});
4，scrollLeft
scrollLeft:内容层左端 到 可视区域左端的距离.
pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
offsetWidth: 用来获取当前拖拽元素 自身的宽度
offsetHeight:用来获取当前拖拽元素 自身的高度
document.documentElement.clientHeight ：屏幕的可视高度
document.documentElement.clientWidth：屏幕的可视高度
获取节点和操作节点
1.获取父节点
el.parentNode
2.兄弟节点
1.nextSibling：指的是下一个节点（包括标签、空文档和换行节点）火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。IE678版本：指下一个元素节点（标签）。
2.nextElementSibling：火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
3.previousSibling：火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。IE678版本：指前一个元素节点（标签）。
4.previousElementSibling：火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
5。总结 为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
补充节点自己.parentNode.children[index]; //随意得到兄弟节点
3.子节点
1.firstChild：火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。IE678版本：指第一个子元素节点（标签）。（2）firstElementChild：火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
2.firstElementChild 火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
3.lastChild：火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。IE678版本：指最后一个子元素节点（标签）。
4.lastElementChild：火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
5.childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。火狐 谷歌等高本版会把换行也看做是子节点。（了解）
6.children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】它只返回HTML节点，甚至不返回文本节点。在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。用法：（用的最多）
7.总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
nodeType
这里讲一下nodeType。
nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
操作dom
节点的访问关系都是属性。
节点的操作都是函数（方法）
1.创建节点
新的标签(元素节点) = document.createElement("标签名");
2.插入节点
方式1： 父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：父节点.insertBefore(新的子节点,作为参考的子节点);
解释：在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点。
3.删除节点
父节点.removeChild(子节点);
4.复制节点
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。
设置节点属性
1.获取节点的属性值
方式一：元素节点.属性; 元素节点[属性]; class是className 不是class
方式二：节点.getAttribute("属性名称");
方式三：节点.attributes 获取当前节点的所有属性节点数组形式
2.设置节点属性值
方式一：直接修改
方式二：元素节点.setAttribute(属性名, 新的属性值);
3.删除节点的属性
元素节点.removeAttribute(属性名);
innerHTML/outerHTML
(1) innerHTML设置或获取标签所包含的HTML+文本信息 (从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
(2)outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
innerText/outerText
（1） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent
（2） outerText设置或获取标签自身及其所包含的文本信息（包括自身）
innerText和outerText在获取的时候是相同效果
但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本
inner HTML和innerText的对比
innerText 打印标签之间的纯文本信息
innerHtml 打印标签之间的内容，包括标签和文本信息
