本章内容
- 理解 Selectors API
- 使用 HTML5 DOM 扩展
- 了解专有的 DOM 扩展
对 DOM 的两个主要的扩展是选择符 API 和 HTML5。
11.1 选择符 API
Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。
11.1.1 querySelecotor() 方法
该方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
var myDiv = document.querySelector('#myDiv');
var img = document.body.querySelector('img.button');
通过Document类型调用时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll() 方法
这个方法返回的是一个NodeList的实例，实际上是带有所有属性和方法的NodeList。
11.1.3 matchesSelector() 方法
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个 CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
if (document.body.matchesSelector("body.page1")) {
//true
}
11.2 元素遍历
过去，要跨浏览器遍历某元素的所有子元素，需要这样写。
var i;
var len;
var child = element.firstChild;
while(child != element.lastChild) {
if (child.nodeType == 1) { //检查是不是元素
processChild(child);
}
child = child.nextSibling;
}
而使用 Element Traversal 新增的元素，代码会更简洁。
var i;
var len;
var child = element.firstElementChild;
while(child != element.lastElementChild) {
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
11.3 HTML5
11.3.1 与类相关的扩充
- getElementsByClassName() 方法
该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类型的所有元素的NodeList。
var allCurrentUsernames = document.getElementsByClassName("username current");
- classList 属性
//删除类
div.classList.remove('user');
//添加类
div.classList.add('current');
//切换类
div.classList.toggle('user');
//确定元素中是否包含类
if(div.classList.contains('bd') && !div.classList.contains('disabled')) {
}
迭代类名
for (var i =0,len=div.classList.length;i < len; i++) {
doSomething(div.classList[i]);
}
11.3.2 焦点管理
HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是document.activeElement属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。
var button = document.getElementById('myButton');
button.focus();
alert(document.activeElement === button); //true
默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
另外新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
11.3.3 HTMLDocument 的变化
- readyState 属性
属性由两个可能的值。
loading，正在加载文档；
complete，已经加载完文档。
if (document.readyState == 'complete') {
//执行操作
}
- 兼容模式
在标准模式下，document.compatMode的值等于CSS1Compat，而在混杂模式下，值等于BackCompat。 - head 属性
新增了document.head属性，引用文档的<head>元素。
var head = document.head || document.getElementsByTagName('head')[0];
11.3.4 字符集属性
charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。默认值为UTF-16。
alert(document.charset); //'UTF-16'
document.charset = 'UTF-8';
另一个属性是defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
11.3.5 自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。比如，自定义属性是data-myname，那映射中对应的属性就是myname。
var div = document.getElementById('myDiv');
var appId = div.dataset.appId;
var myName = div.dataset.myname;
div.dataset.appId = 23456;
div.dataset.myname = 'Michael';
11.3.6 插入标记
- innerHTML 属性
在读模式下，innerHTML属性返回与调用元素的所有子节点对应的 HTML 标记。在写模式下，innerHTML会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
div.innerHTML = 'hello world!';
div.innerHTML = "hello,<b>\""reader\""!</b>";
- outerHTML 属性
在读模式下，该属性返回所有调用它的元素及所有子节点的 HTML 标签。再写模式下，会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。 - insertAdjacentHTML() 方法
该方法接收两个参数，插入位置和要插入的 HTML 文本。
11.3.7 scrollIntoView() 方法
该方法可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就会出现在视口中。如果给这个方法传入true作为参数，或不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如传入false作为参数，调用参数会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐。
document.forms[0].scrollIntoView();
11.4 专有扩展
11.4.1 文档模式
要强制浏览器以某种模式渲染页面，可以使用 HTTP 头部信息X-UA-Compatible，或通过等价的<meta>标签来设置：
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
11.4.2 children 属性
该属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。
var childCount = element.children.length;
var firstChild = element.children[0];
11.4.3 contains() 方法
调用contains()方法的应该是祖先节点，接收一个参数，即要检测的后代节点。
alert(document.documentElement.contains(document.body)); //true
使用 DOM Level 3 compareDocumentPosition()也能确定节点间的关系。
11.4.4 插入文本
这两个没有被 HTML5 看中的属性是innerText和outerText。
11.4.5 滚动
-
scrollIntoViewIfNeeded(alignCenter)：若可选参数设为true，则表示尽量显示在垂直方向的中部。 -
scrollByLines(lineCount)：将元素的内容滚动指定的行高，可以是正值，也可以是负值。 -
scrollByPages(pageCount)：滚动指定的页面高度。
11.5 小结
虽然 DOM 为与 XML 及 HTML 文档交互制定了一系列核心 API，但仍然有几个规范对标准的 DOM 进行了扩展。
- Selectors API
- Element Traversal
- HTML 5
网友评论