对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和HTML5,还有Element Traversal (元素遍历)规范，为 DOM 添加了一些属性。除了这些标准拓展以外还有一些专有拓展。
选择符API
Selectors API Level 1:IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+.
querySelector():返回匹配到的第一个元素,若无则返回null,如果传入不被支持的选择符则抛出错误.
html:
<div class="group">
<div class="top">
<div class="top-title">顶部标题</div>
<div class="top-content">顶部内容顶部内容</div>
<ul class="top-ul">
<li>顶部第一行</li>
<li>顶部第二行</li>
<li class="top-li">顶部第三行</li>
<li class="top-lastLi">顶部第四行</li>
</ul>
</div>
<div class="bottom">
<div class="bottom-title">底部标题</div>
<ul class="bottom-ul">
<li>底部第一行</li>
<li>底部第二行</li>
<li>底部第三行</li>
<li>底部第四行</li>
</ul>
</div>
</div>
js:
var ele = document.querySelector(".top-ul>li.top-li+li.top-lastLi");
console.log(ele);
querySelectorAll():返回NodeList实例,其他特性与querySelector一样.
ele = document.querySelectorAll("li");
console.log(ele);
for(var i=0,len=ele.length;i<len;i++){
console.log(ele.item(i));
}
调用这两个方法的类型包括:Document,DocumentFragment和Element.
var bottom = document.querySelectorAll('div.bottom')[0];
console.log(bottom.querySelectorAll("li"));
Selector API Level 2:matchesSelector()方法判断调用元素与该选择符是否匹配,但这个方法的兼容性尚不知如何,可考虑使用msMatchesSelector , mozMatchesSelector , webkitMatchesSelector.
元素遍历
对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样,就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保 持 DOM 规范不变，Element Traversal 规范新定义了一组属性。
childElementCount:返回子元素(不包括文本节点和注释)的个数。
firstElementChild:指向第一个子元素;firstChild 的元素版。
lastElementChild:指向最后一个子元素;lastChild 的元素版。
previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
var topUl = document.querySelector(".top-ul");
console.log(topUl);
console.log(topUl.childNodes.length);
console.log(topUl.firstChild);
console.log(topUl.lastChild);
//可分别比较不同的地方
console.log(topUl.childElementCount);
console.log(topUl.firstElementChild);
console.log(topUl.lastElementChild);
HTML5
HTML5 规范围绕如何使用新增标记定义了大量 JavaScript API.
1.类相关
①getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。兼容性:IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 Opera 9.5+.
②除了原有的className属性,新增了classList属性,可以很方便地操纵类:
length属性
item()方法
add(value):将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value):表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value):从列表中删除给定的字符串。
toggle(value):切换:如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它。
var boTitle = document.querySelector(".bottom-title");
console.log(boTitle);
console.log(boTitle.className);
console.log(boTitle.classList);
console.log(boTitle.classList.length);
boTitle.classList.add("aa","bb","cc");
console.log(boTitle.classList);
boTitle.classList.remove("bb");
console.log(boTitle.classList);
boTitle.classList.toggle("common-title");
console.log(boTitle.classList);
boTitle.classList.toggle("dd");
console.log(boTitle.classList);
console.log(boTitle.classList.contains("bottom-title"));
console.log(boTitle.classList.item(2));
2.焦点管理
①activeElement属性:始终会引用 DOM 中当前获得了焦点的元素,元素获得焦点的方式有页面加载、用户输入(通常是通过按 Tab 键)和在代码中调用focus()方法.默认情况下,文档刚刚加载完成时,document.activeElement中保存的是 document.body元素的引用,文档加载期间，document.activeElement 的值为 null。
②document.hasFocus()方法:用于确定文档是否获得了焦点,可以知道用户是不是正在与页面交互。
3.HTMLDocument的变化
①document.readyState:可能有的值:loading,interactive,complete等,可用它实现一个指示文档已经加载完成的指示器。
document.onreadystatechange = function () {
console.log(document.readyState);
if(document.readyState == "complete"){
}
};
②兼容模式:compatMode属性。在标准模式下，document.compatMode等于"CSS1Compat",而在混杂模式下，document.compatMode等于"BackCompat"。
③head属性
var head = document.head || document.getElementsByTagName("head")[0];
4.字符集属性
①document.charset获取到当前文档的字符集,②document.charset = "UTF-16",这句暂时没发现起作用,③document.defaultCharset:表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么,但打印出来暂时看到的是undefined.
5.自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。获取途径:
①getAttribute()方法
②元素的dataset属性:DOMStringMap 的一个实例,也就是一个名值对儿的映射(如果自定义属性是data-myname，那映射中对应的属性就是 myname).
6.插入标记
使用插入标记的技术，直接插入 HTML 字符串不仅更简单，速度也更快。
innerHTML 属性
在读模式下，innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应 的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
但是，不同浏览器返回的文本格式会有所不同。IE 和 Opera 会将所有标签转换为大写形式，而 Safari、 Chrome 和 Firefox 则会原原本本地按照原先文档中(或指定这些标签时)的格式返回 HTML，包括空格 和缩进。不要指望所有浏览器返回的 innerHTML 值完全相同。
在写模式下，innerHTML 的值会被解析为 DOM 子树，替换调用元素原来的所有子节点。因为它的值被认为是 HTML，所以其中的所有标签都会按照浏览器处理 HTML 的标准方式转换为元素(同样,这里的转换结果也因浏览器而异)。如果设置的值仅是文本而没有 HTML 标签，那么结果就是设置纯文本。为 innerHTML 设置 HTML 字符串后,浏览器会将这个字符串解析为相应的 DOM 树。因此设置了 innerHTML 之后，再从中读取 HTML 字符串，会得到与设置时不一样的结果。原因在于返回的字符串是根据原始 HTML 字符串创建的 DOM 树经过序列化之后的结果。
outerHTML属性
在读模式下，outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。支持 outerHTML 属性的浏览器有 IE4+、Safari 4+、Chrome 和 Opera 8+。Firefox 7 及之前版本都不 支持 outerHTML 属性。
insertAdjacentHTML()方法
支持 insertAdjacentHTML()方法的浏览器有 IE、Firefox 8+、Safari、Opera 和 Chrome。它接收两个参数:插入位置和要插入的 HTML 文本。第一个参数必须是下列值之一:
beforebegin:插入前一个同辈元素
afterend:插入后一个同辈元素
afterbegin:插入的第一个子元素
beforeend:插入的最后一个子元素
内存与性能问题
在删除带有事件处理程序或引用了其他 JavaScript 对象子树时，就有可能导致内存占用问题。假设 某个元素有一个事件处理程序(或者引用了一个 JavaScript 对象作为属性)，在使用前述某个属性将该元 素从文档树中删除后，元素与事件处理程序(或 JavaScript 对象)之间的绑定关系在内存中并没有一并 删除。如果这种情况频繁出现，页面占用的内存数量就会明显增加。因此，在使用 innerHTML、 outerHTML 属性和 insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性。
7.scrollIntoView()方法
scrollIntoView()方法不传参数或者传参数true,代表窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
如果传参数false,调用元素会尽可能全部出现在视口中，(可能的话，调用元素的底部会与视口底部平齐。)
实际上，为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。
专有拓展
1.文档模式(IE)
2.children属性(HTMLCollection实例:返回子元素数组,IE8及更早版本还会返回注释节点,其他都基本正常(safari2有bug))
3.contains()方法:IE、Firefox 9+、Safari、Opera 和 Chrome.
DOM Level 3 compareDocumentPosition(): IE9+、Firefox、Safari、Opera 9.5+和 Chrome
4.插入文本
innerText属性(IE4+、Safari 3+、Opera 8+和 Chrome,而Firefox 虽然不支持 innerText，但支持作用类似的 textContent 属性:IE9+、Safari 3+、Opera 10+和 Chrome)
outerText 属性(IE4+、Safari 3+、Opera 8+和 Chrome),相当于删掉整个元素再用一个文本节点替代了.
5.滚动(在chrome中实践不行)
scrollIntoViewIfNeeded(alignCenter)(实现:safari和chrome)
scrollByLines(lineCount)(实现:safari和chrome)
scrollByPages(pageCount)(实现:safari和chrome)
作者：小熊94
链接：https://www.jianshu.com/p/79e25f0ccd39
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
