CSS 类扩展
1、 getElementsByClassName()
// 取得所有类名中包含"username"和"current"元素
// 这两个类名的顺序无关紧要
let allCurrentUsernames = document.getElementsByClassName("username current");
// 取得 ID 为"myDiv"的元素子树中所有包含"selected"类的元素
let selecteds = document.getElementById("myDiv").getElementsByClassName("selected");
2、classList 属性
- add(value) ，向类名列表中添加指定的字符串值 value 。如果这个值已经存在，则什么也不做。
- contains(value) ，返回布尔值，表示给定的 value 是否存在。
- remove(value) ，从类名列表中删除指定的字符串值 value 。
- toggle(value) ，如果类名列表中已经存在指定的 value ，则删除；如果不存在，则添加。
<div class="bd user disabled">...</div>
div.classList.remove("user");
// 删除"disabled"类
div.classList.remove("disabled");
// 添加"current"类
div.classList.add("current");
// 切换"user"类
div.classList.toggle("user");
// 检测类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
// 执行操作
)
// 迭代类名
for (let class of div.classList){
doStuff(class);
}
焦点管理
HTML5 增加了辅助 DOM 焦点管理的功能。首先是 document.activeElement ，始终包含当前拥有焦点的 DOM元素。页面加载时，可以通过用户输入（按 Tab 键或代码中使用 focus() 方法）让某个元素自动获得焦点。例如：
let button = document.getElementById("myButton");
button.focus();
console.log(document.activeElement === button); // true
默认情况下， document.activeElement 在页面刚加载完之后会设置为 document.body 。而在页面完全加载之前， document.activeElement 的值为 null 。其次是 document.hasFocus() 方法，该方法返回布尔值，表示文档是否拥有焦点：
let button = document.getElementById("myButton");
button.focus();
console.log(document.hasFocus()); // true
确定文档是否获得了焦点，就可以帮助确定用户是否在操作页面。第一个方法可以用来查询文档，确定哪个元素拥有焦点，第二个方法可以查询文档是否获得了焦点，而这对于保证 Web 应用程序的无障碍使用是非常重要的。无障碍 Web 应用程序的一个重要方面就是焦点管理，而能够确定哪个元素当前拥有焦点（相比于之前的猜测）是一个很大的进步。
HTMLDocument 扩展
1、readyState 属性
document.readyState 属性有两个可能的值：
- loading ，表示文档正在加载；
- complete ，表示文档加载完成。
实际开发中，最好是把 document.readState 当成一个指示器，以判断文档是否加载完毕。
if (document.readyState == "complete"){
// 执行操作
}
2、compatMode 属性
自从 IE6 提供了以标准或混杂模式渲染页面的能力之后，检测页面渲染模式成为一个必要的需求。 IE 为 document 添加了 compatMode 属性，这个属性唯一的任务是指示浏览器当前处于什么渲染模式。如下面的例子所示，标准模式下 document.compatMode 的值是 "CSS1Compat" ，而在混杂模式下，document.compatMode 的值是 "BackCompat" ：
if (document.compatMode == "CSS1Compat"){
console.log("Standards mode");
} else {
console.log("Quirks mode");
}
HTML5 最终也把 compatMode 属性的实现标准化了。
3、head 属性
作为对 document.body （指向文档的 元素）的补充，HTML5 增加了 document.head 属 性，指向文档的 元素。可以像下面这样直接取得 元素：
let head = document.head;
字符集属性
HTML5 增加了几个与文档字符集有关的新属性。其中， characterSet 属性表示文档实际使用的 字符集，也可以用来指定新字符集。这个属性的默认值是 "UTF-16" ，但可以通过 元素或响应头， 以及新增的 characterSeet 属性来修改。下面是一个例子：
console.log(document.characterSet); // "UTF-16"
document.characterSet = "UTF-8";
自定义数据属性
HTML5 允许给元素指定非标准的属性，但要使用前缀 data- 以便告诉浏览器，这些属性既不包含与渲染有关的信息，也不包含元素的语义信息。除了前缀，自定义属性对命名是没有限制的， data- 后面跟什么都可以。下面是一个例子：
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。 dataset 属性是一个DOMStringMap 的实例，包含一组键/值对映射。元素的每个 data-name 属性在 dataset 中都可以通过 data- 后面的字符串作为键来访问（例如，属性 data-myname 、 data-myName 可以通过 myname 访问，但要注意 data-my-name 、 data-My-Name 要通过 myName 来访问）。下面是一个使用自定义数据属性的例子：
// 本例中使用的方法仅用于示范
let div = document.getElementById("myDiv");
// 取得自定义数据属性的值
let appId = div.dataset.appId;
let myName = div.dataset.myname;
// 设置自定义数据属性的值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
// 有"myname"吗？
if (div.dataset.myname){
console.log(`Hello, ${div.dataset.myname}`);
}
自定义数据属性非常适合需要给元素附加某些数据的场景，比如链接追踪和在聚合应用程序中标识页面的不同部分。另外，单页应用程序框架也非常多地使用了自定义数据属性。
插入标记
1、innerHTML 属性
<div id="content">Hello & welcome, <b>"reader"!</b></div>
let div = docment.querySelector("#content")
div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
2、outerHTML 属性
读取 outerHTML 属性时，会返回调用它的元素（及所有后代元素）的 HTML 字符串。在写入 outerHTML 属性时，调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。
