对DOM的扩展主要是：Selectors API和HTML5。
Selectors API
Selectors API是由W3C发起指定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API Level1的核心方法：querySelector()和querySelectorAll()。
querySelector()方法
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素；如果没有匹配元素，返回null。
// 获取body元素
var body = document.querySelector("body");
// 获取ID为“myDiv”的元素
var myDiv = document.querySelector("#myDiv");
// 获取类为“selected”的第一个元素
var selected = document.querySelector(".selected");
// 取得类为“button”的第一个图像元素
var img = document.body.querySelector("img.button");querySelectorAll()方法
querySelectorAll()同样接收一个CSS选择符，返回的是所有匹配的元素，是一个NodeList实例。
// 取得某<div>中所有<em>元素
var ems = document.getElementById("myDiv").querySelectorAll("em");
// 获取类为selected的所有元素
var selecteds = document.querySelectorAll(".selected");
// 取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
// 遍历NodeList
var i, len, strong;
for (i = 0, len = strongs.length; i < len; i++) {
strong = strongs[i];// strong = strongs.item(i);
strong.className = "important";
}matchesSelector()方法
Selectors API Level2新增了matchesSelector()，它接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。
if (document.body.matchesSelector("body.page1")) {
// true
}元素遍历
以往遍历元素的方式：
var i,
len,
child = element.firstChild;
while (child != element.lastChild) {
if (child.nodeType == 1) { // 检查是否元素
processChild(child);
}
child = child.nextSibling;
}使用Element Traversal新增的元素：
var i,
len,
child = element.firstElementChild;
while (child != element.lastElementChild) {
processChild(child);
child = child.nextElementSibling;
}HTML5
getElementsByClassName()方法
getElementsByClassName()接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。
// 取得所有类中包含“username”和“current”元素+
var allCurrentUsernames = document.getElementsByClassName("username current");
// 获取ID为“myDiv”的元素中带有类名“selected”的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");classList属性
HTML5新增了一种操作类名的方式：
// 删除“disabled”类
div.classList.remove("disabled");
// 添加“current”类
div.classList.add("current");
// 切换“user”类
div.classList.toggle("user");
// 确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
// 执行操作
}焦点管理
HTML5添加了管理DOM焦点的功能。document.activeElement属性始终会引用DOM中当前获得了焦点的元素。focus()获取焦点，hasFocus()判断是否获取焦点
var button = document.getElementById("myButton");
// 获取焦点
button.focus();
alert(document.activeElement === button); // true
alert(button.hasFocus()); // trueHTMLDocument的变化
readyState属性
Document的readyState属性有两个可能的值：
- loading：正在载入文档
- complete:已经加载完文档
document.readyState属性基本用法：
if (document.readyState == "complete") {
// ...
}兼容模式
检测页面的兼容模式是浏览器必要的功能。在标准模式下，document.compatMode的值等于“CSS1Compat”,而混杂模式下，document.compatMode的值等于“BackCompat”。
if (document.compatMode == "CSS1Compat") {
alert("Standards mode");
} else {
alert("Quirks mode");
}head属性和字符集属性
HTML5新增了document.head元素，引用文档的<head>元素
var head = document.head;
var head = document.getElementsByTagName("head")[0];HTML5新增了document.charset元素，表示文档中实际使用的字符集。可以通过<meta>元素、响应头或直接设置charset属性修改。
alert(document.charset);
document.charset = "UTF-8";另一个属性defaultCharset，表示根据默认浏览器及曹组系统的设置。如果文档中没有使用默认的字符集，那charset和defaultCharset可能不一致。
if (document.charset != document.defaultCharset) {
// ...
}innerHTML属性
读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
<div id="content">
<p>This is a <strong>para.</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>对于上面的<div>元素而言，它的innerHTML属性会返回如下字符串
<p>This is a <strong>para.</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>写模式下，innerHTML的值会被解析为DOM字数，替换调用元素原来的所有子节点。
div.innerHTML = "Hello javascript";为innerHTML设置的包含HTML的字符串值与解析后innerHTML的值不相同。
div.innerHTML = "Hello & welcome, <b>"reader"!</b>";结果如下：
<div id="content">Hello & welcome, <b>"reader"!</b></div>原因在于返回的字符串是根据原始HTML字符串创建的DOM树经过序列化之后的结果。
在大多数浏览器中，innerHTML插入<script>元素并不会执行其中的脚本。
div.innerHTML = "<script defer>alert('hello');</script>";// 无效如果需要插入这段脚本，必须在前面添加一个“有作用域的元素”。例如：
div.innerHTML = "<input type="hidden"><script defer>alert('hello');</script>";outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
<div id="content">
<p>This is a <strong>para.</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>如果在<div>元素上调用outerHTML，会返回上面相同的代码。
使用outerHTML属性设置值：
div.outerHTML = "<p>This is a paragraph.</p>";这行代码与下面的操作一样：
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a para."));
div.parentNode.replaceChild(p, div);insertAdjacentHTML()方法
// 作为第一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello javascript</p>");
// 作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello javascript</p>");
// 作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello javascript</p>");
// 作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello javascript</p>");
本文转载自：https://www.cnblogs.com/xiaoxiaoyihan/p/5692133.html