JavaScript 一些 DOM 的学问点
原文链接/)
原本预备把 DOM 的接口都总结一遍，然则我太无邪了，DOM 下面的接口太巨大了，总结起来太费时了，所以只将本身日常平凡没注意到的以及常用到的学问记下来了，更细致的 DOM 照样看 MDN 上的材料吧！
Node 接口
Node 是一个接口，该接口由 DOM 中的一切的节点范例完成，即一切节点范例（比方最常见的 Element 范例）都继承自 Node 接口。
原本，节点范例总共有12种，然则跟着 DOM4 的涌现，有 5 种节点范例被弃用。（概况看这里）
Node 接口的许多属性（比方 childNodes 、lastChild、firstChild、nextSibling、previousSibling）针对的是一切的节点范例，并不只是元素节点。
document.body.childNodes;在浏览器掌握端输入上面的代码，你会看到显现的效果不仅唯一元素节点，还可能有文本节点、解释节点等！
Node.hasChildNodes()：检测一个节点下面是不是包含一个或多个节点，如果，则返回 true。
Node.contains(otherNode)：推断传入的节点是不是是挪用该要领的节点的子女节点。
Document 范例（文档节点）
JavaScript 经由过程 Document 范例示意文档。document 对象是 window 对象的一个属性。
一些 document 对象的属性：
document.documentElement // 指向 html 元素
document.head // 指向 head 元素（HTML 5 新增）
document.body // 指向 body 元素
document.characterSet // 获得文档运用的字符集
document.title // 获得或设置文档的题目
document.URL // 获得文档完全的 URL
document.domain // 获得文档地点的域名Element 范例（元素节点）
Element 范例节点的 nodeType 的值为 1，nodeName 的值为元素的标署名。
有关 Element范例节点的特征
猎取或设置公认的特征平常直接运用
对应的属性猎取或设置自定义特征，运用
getAttribute()、setAttribute()要领依据 HTML5 范例，自定义特征应当加上
data-前缀以便考证
// HTML 代码
<div id="container" class="class1 class2" title="titleValue">
Some text
<div>
// js 代码，运转于浏览器掌握端
var ele = document.getElementById("container");
ele.id; // "container"
ele["id"]; // "container"
ele.className; // "class1 class2"
ele.title; // "titleValue"
ele.className += " class3"; // 变动 class 的值
ele.className; // "class1 class2 class3"
// 应用 setAttribute() 能够增加元素不存在的特征
ele.setAttribute("data-test","just test"); // 增加自定义特征
ele["data-test"]; // undefined，不能直接接见自定义特征
ele.getAttribute("data-test"); // "just test"
ele.removeAttribute("class"); // 删除 class 特征
ele.className; // ""，一个空字符串classList 属性
这个属性是 HTML5 中新增的用来操纵元素类名的属性。它比 className 属性运用起来更轻易。这个属性返回的是一个新鸠合范例 DOMTokenList 的实例，它也是一个类数组对象。
<div id="container" class="class1 class2"><div>
var ele = document.getElementById("container");
ele.classList; // ["class1", "class2"]
ele.classList[0]; // "class1" string 范例
ele.classList.length; // 2
ele.classList.add("class3"); // 增加新类名
ele.classList.remove("class1"); // 删除类名
ele.classList; // ["class2", "class3"]
// contains() 用来检测是不是某个类名
ele.classList.contains("class1"); // false
ele.classList.contains("class2"); // true
// toggle() 用来交替删除增加某个类名
ele.classList.toggle("class4"); // 不存在，则增加
ele.classList; // ["class2", "class3", "class4"]
ele.classList.toggle("class4"); // 存在，则删除
ele.classList; // ["class2", "class3"]attributes 属性：返回一个
NamedNodeMap类数组对象，它不能运用数组的要领。
平常不运用这个属性，除非用来遍历元素的特征。
// 继承上面的代码
ele.attributes; // NamedNodeMap {0: id, 1: title, 2: data-test, length: 3}
ele.attributes[0].nodeName; // "id"
ele.attributes[0].nodeValue; // "container"document.createElement()：建立新元素节点
var div = document.createElement("div");
console.log(div); // <div></div>
console.log(typeof div); // object
div.id = "container";
div.className = "a b c";
console.log(div); // <div id="container" class="a b c"></div>元素遍历
我们前面说过，某个元素节点的 childNodes 属性返回的鸠合可能会包含解释节点、文本节点等我们平常不会去操纵的节点，我们想要的只是元素节点。所以我们能够用下面的要领来到达我们的目标：
// 道理：经由过程 if 前提语句过滤掉不是元素节点的别的节点
var ele = document.getElementById("container");
var len = ele.childNodes.length;
for(let i = 0; i < len; i++){
if(ele.childNodes[i].nodeType === 1){
// 实行一些操纵
ele.childNodes[i].style.color = "green";
}
}很荣幸，如今，W3C 已帮我们搞出了一些新的属性来特地操纵元素节点。
Element.children：返回一个该元素下一切子元素节点的鸠合
Element.firstElementChild：返回第一个子元素节点
Element.lastElementChild：返回末了一个子元素节点
Element.previousElementSibling：返回前一个平辈元素节点
Element.nextElementSibling：返回后一个平辈元素节点
插进去标记
innerHTML：返回或变动挪用它的节点的一切子节点（包含解释节点、文本节点等）
outerHTML：返回或变动挪用它的元素以及这个元素一切的子节点
上面两种属性返回的都是字符串
element.insertAdjacentHTML(position, text)：将指定的文本剖析为 HTML 或 XML，然后将效果节点插进去到指定的位置上
position 是相对于 element 元素的位置，而且它有四个值
beforebegin：在 element 元素之前插进去一个紧邻的平辈元素
afterbegin：在 element 元素的第一个子节点之前插进去
beforeend：在 element 元素的末了一个节点今后插进去
afterend：在 element 元素今后插进去一个紧邻的平辈元素
Text 范例（文本节点）
Text 范例的节点（文本节点）的 nodeType 的值为 3。
document.createTextNode(“文本内容”)：建立新文本节点
范例化文本节点
DOM 文档中存在相邻的文本节点很轻易致使杂沓，因为分不清哪一个文本节点示意哪一个字符串。所以在 Node 接口中定义了一个 normalize() 要领，用来将当前节点和它的子女节点范例化。在一个”范例化”后的DOM树中，不存在一个空的文本节点，或许两个相邻的文本节点。
var ele = document.createElement("div");
var textNode = document.createTextNode("Hello ");
ele.appendChild(textNode);
var anotherTextNode = document.createTextNode("world!");
ele.appendChild(anotherTextNode);
document.body.appendChild(ele);
console.log(ele.childNodes.length); // 2
ele.normalize(); // 范例化文本节点
console.log(ele.childNodes.length); // 1innerText 属性：获得或变动操纵元素包含的一切文本内容
Comment 范例（解释节点）
平常不会去操纵解释节点！
<div id="test"><!-- A comment --></div>
// 解释节点是 div 元素的一个子节点document.createComment()：建立一个解释节点
选择符 API
Selector API 是由 W3C 提议制订的一个规范，致力于让浏览器原生 JavaScript 支撑 CSS 查询。
Selectors API Level 1 的中心是两个要领：
querySelector()和querySelectorAll()。
// selectors 是一个 CSS 选择器字符串
// 从全部文档开始查找
Document.querySelector(selectors)
Document.querySelectorAll(selectors)
// 从 Element 元素的子女元素开始查找
Element.querySelector(selectors)
Element.querySelectorAll(selectors)文档形式（document mode）
Doctype 是 Document Type (文档范例)的简写，用来申明你用的XHTML或许HTML是什么版本。它的作用是示知浏览器的剖析器，用什么文档范例范例来剖析这个文档。
文档形式用于指定IE的页面排版引擎（Trident）以哪一个版本的体式格局来剖析并衬着网页代码
document.compatMode：检测当前文档的衬着形式
若值为 BackCompat，则为混淆形式
若值为 CSS1Compat，则为规范范例形式
document.documentMode：检测 IE 浏览器是在哪一个浏览器形式下（这个属性只适用于 IE 浏览器）
DOM2 款式
HTMLElement.style：返回一个 CSSStyleDeclaration 对象，示意元素的内嵌 style 属性。
这个属性的返回值只包含了在元素内嵌 style 属性上声明的的 CSS 属性，而不包含来自其他地方声明的款式（比方 head 部份声明的 CSS 属性）。
因为 style 属性的优先级和经由过程 style 设置元素的内联款式是一样的，而且在css层级款式中具有最高优先级，因而在为特定的元素设置款式时很有效。
// 为元素增加 2 个内嵌的 CSS 划定规矩
var ele = document.getElementById("container");
// 要领一
ele.setAttribute("style","font-size:2em;color:green");
// 要领二
ele.style.cssText = "font-size:2em;color:green";
// 要领三
var sty = ele.style;
sty.fontSize = "2em";
sty.color = "green";要猎取一个元素的一切 CSS 属性，你应当运用 window.getComputedStyle()
// 纯真地挪用这个要领，会和上面的 style 属性一样返回一个 CSSStyleDeclaration 对象
window.getComputedStyle(ele);
// 该要领返回经由叠加盘算后的元素的现实款式
window.getComputedStyle(ele).fontSize;
window.getComputedStyle(ele).color;document.styleSheets：只读，返回一个由 StyleSheet 对象构成的 StyleSheetList，每一个 StyleSheet 对象都是文档中链接或嵌入的款式表（即内联款式和外联款式，不包含嵌在元素里的款式）。
// 猎取当前文档中款式表的数目
document.styleSheets.length;
// 禁用第一个款式表
document.styleSheets[0].disabled = true;DOM2 遍历
DOM2 中定义了两个用于辅佐完成递次遍历 DOM 构造的范例：NodeIterator 和 TreeWalker。
document.createNodeIterator()：返回一个 NodeIterator 对象
document.createTreeWalker()：返回一个 TreeWalker 对象
这里只简朴提一下这两个要领，因为临时还没用过，所以先不展开了，今后用了再补。
DOM2 局限（range）
Range 对象 示意一个包含节点和部份文本节点的文档片断
document.createRange()：返回一个 Range 对象
这个也是简朴提一下，今后用到了再补。
参考材料
【书】《JavaScript 高等程序设计（第三版）》
