一、DOM：针对HTML和XML文档的一个API（应用程序编程接口）
描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分
标签只是节点的一种，可能为文本、注释,换行符、空格 等。
二、查找节点 （查）
childNodes：所有子节点
children：所有是标签类型的子节点
parentNode：父节点
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
firstChild : 第一个子节点
lastChild：最后一个子节点
三、创建节点 （增）
1、创建标签点
var span = document.createElement("span");
2、创建文本节点
var text = document.createTextNode("你好");
四、插入节点
1、在redDiv的子级末尾插入span标签
redDiv.appendChild(span);
2、在redDiv的 第二个子标签 前面插入span标签
redDiv.insertBefore(span,redDiv.children[1]);
五、移除节点 （删）
1、通过父级移除
redDiv.removeChild(p);
2、通过自身移除
p.remove();
六、更改节点 （改）
// 两个参数: 新节点，旧节点
redDiv.replaceChild(h1,redDiv.children[0]);
七、DOM属性
DOM属性与两个因数有关：大小（width、height）、位置（left、top）
div.offserWidth div带边框的宽度
div.clientWidth div不带边框的宽度
div.scrollWidth div 内容的宽度
div.offsetTop div父级或者相对父级的高 （不带边框）
div.clientTop div上边框的高度（厚度）
div.scrollTop div向上滚动的高度（带边框）（无滚动：一般为0）
window.innerWidth 可视窗口 （不包括控制台）
window.outerWidth 整个浏览器窗口（包括控制台）
求div相对可视窗口的高度：div.offsetTop - document.documentElement.scrollTop[body的滚动高]
7547996-006933d9125eb2bc.png
七、获取HTML元素的属性
getAttribute("属性")； 如果查找不到，返回为null
setAttribute("属性","属性值"); 更改属性的属性值
八、获取body坐标
需要兼容： document.documentElement...
原因：document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0