Javascript DOM 总结
浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式成为文档对象模型，或简称DOM。
DOM的根节点是
document.documentElement获取节点：
document.getElementById（通过元素的 id 值来获取节点）
document.getElementsByClassName（通过元素的 class 值来获取节点，返回的是一个类似于数组的对象，数组里面的每个元素的class值相同）
document.getElementsByTagName（通过元素的 标签 来获取节点，返回的是一个类似于数组的对象，数组里面的每个元素的标签相同 ）创建节点：
document.createElement("p")（创建元素节点，例子中是创建一个段落）
document.createTextNode("...")（创建文本节点）（基本）节点属性:
NODE.nodeType（返回节点的类型）：1 代表元素节点； 2 代表属性节点； 3 代表文本节点；8 代表注释 (PS:NODE指的是任意节点）
NODE.nodeName(返回节点名称）
NODE.nodeValue（返回节点的值）（层次）节点属性：
NODE.parentNode（获取当前节点的父节点）
NODE.childNodes（获取当前节点的子节点）
NODE.firstChild（获取当前节点的第一个子节点）
NODE.lastChild（获取当前节点的最后一个子节点）
NODE.previousSibing（获取当前节点的前一个兄弟节点，如果无则为null）
NODE.nextSibing（获取当前节点的后一个兄弟节点，如果无则为null ）修改节点的操作（PS：下面的NODE代表父节点）:
NODE.removeChild（移除特定节点）
NODE.appendChild（添加子节点，并将其放置在孩子节点列表末尾）
NODE.insertBefore（将第一个参数表示的节点插入到第二个参数表示的节点前面。例子：NODE.insertBefore(A, B);//把节点A插到节点B的前面）
NODE.replaceChild（将一个子节点替换为另一个子节点。例子：NODE.replaceChild(A, B);//用节点A 来代替节点B）
（insertBefore和replaceChild都把新节点作为第一个参数）获取（设置）元素的属性:
（这里说明一下：【元素的属性】和【元素节点属性】是不同的，前者的“元素”指的是HTML中的元素，后者是指DOM中的元素节点。）
我们可以通过元素的DOM对象的同名属性去访问元素的某些属性，比如链接的href属性。
（PS：下面的NODE指的是元素节点）
NODE.getAttribute("align")（获取align属性的内容）
NODE.setAttribute("align", "center")（设置【或创建】align属性为center）（可以用该语句来创建自定义属性）
NODE.removeAttribute("align")（删除align属性）布局:
块元素 （Block，会换行）
内联元素 （Inline）
元素的尺寸与位置 属性：
var NODE = document.getElementsByTagName("p")[0];
NODE.offSetWidth（元素的起始位置 宽 单位：像素）
NODE. offSetHeight（元素的起始位置 高 单位：像素）
NODE. clientWidth（元素内部占据的空间尺寸 宽 忽略边界宽度）
NODE. clientHeight（元素内部占据的空间尺寸 高 忽略边界宽度）
window. pageXOffset（当前页面相对于窗口显示区左上角的X位置）
window. pageYOffset（当前页面相对于窗口显示区左上角的Y位置）
PS: 更详细请看这里查询选择器:
document.querySeletorAll("...");// 该方法接受一个选择器字符串并返回类似与数组对象，返回的对象中包含所有匹配的元素
document.querySeletor("...");// 该方法至返回第一个匹配元素，如果不在则返回null获取（控制）元素的类
element.classList.length（返回类列表中类的数量）element.classList.add(class1, class2, ...)（在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加。）element.classList.contains(class)（返回布尔值，判断指定的类名是否存在。）element.classList.item(index)（返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null。）element.classList.remove(class1, class2, ...)（移除元素中一个或多个类名。若移除不存在的类名，不会报错。）element.classList.toggle(class, true|false)（在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。）toggle的例子：
移除一个 class:element.classList.toggle("classToRemove", false);
添加一个 class:element.classList.toggle("classToAdd", true);获取（控制）元素的样式
element.style.样式属性名（获取元素的样式）element.style.样式属性名 = '属性值'（设置元素的样式）
（由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。）