JS-DOM

一、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