尽管DOM作为API已经十分完善了，但是为了更多的功能，仍然会有一些专有的扩展。
选择符API
为了让让浏览器原生支持 CSS 查询，选择符API提供了两个主要的方法：querySelector()和querySelectorAll()，可以通过Document和Element类去调用。支持的浏览器有：IE8+,FireFox3.5,Safari3.1+,Chrome和Opera10+
-
querySelector()
1.该方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
var myDiv = document.querySelector('#myDiv'); //选择了id为myDiv的第一个元素
var img = document.body.querySelector('.button'); //在body中class为button的第一个元素
-
querySelectorAll()
这个方法返回的是一个NodeList的实例，实际上是带有所有属性和方法的NodeList。
var myDiv = document.querySelector('#myDiv'); //选择了id为myDiv的元素
var img = document.body.querySelector('.button'); //在body中class为button的元素的nodeList
-
matchesSelector()
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个 CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
if (document.body.matchesSelector("body.page1")) {
//true
}
元素遍历
对于元素间的空格，IE9 及之前的版本不会返回文本节点，而其他浏览器都会返回文本节点，因此导致了在使用 childNodes 和 fristChild 等属性时的行为不一致。为了弥补差异，Emelent Traversal 规范定义了一组新属性：
1.childElementCount: 返回子元素（不包括文本节点和注释）的个数。
2.firstElementChild: 指向第一个子元素；firstChild 的元素版。
3.lastElementChild: 指向最后一个子元素；lastChild 的元素版。
4.previousElementSibling: 指向前一个同辈元素；previousSibling 的元素版。
5.nextElementSibling: 指向后一个同辈元素；nextSibling 的元素版。
//现在可以这样遍历元素的子元素
var i;
var len;
var child = element.firstElementChild;
while(child != element.lastElementChild) {
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
HTML5相关的扩展
- 类相关的扩充
1.getElementsByClassName()：该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类型的所有元素的NodeList。支持的浏览器是：IE9+,Firefox3+，Safari3.1+,Chrome和Opera9.5+；
var allCurrentUsernames = document.getElementsByClassName("username current");
//返回class同时为a和b的元素
2.classList:获取元素的class，返回一个DOMTokenList的实例，length属性代表长度，item()和方括号引用；而且还添加了如下方法：add(),contain(),remove(),toggle()
支持的浏览器只有：Firefox3.6+和Chorme
//删除类
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]);
}
-
焦点管理
HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是document.activeElement属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。支持的浏览器是：IE4+,Firefox3+，Safari4+,Chrome和Opera8+；
1.默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。
2.文档加载期间，document.activeElement的值为null。
3.另外新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。 -
HTMLDocument的变化
HTML5页扩展了HTMLDocument，增加了新的功能。
1.readyState 属性，表示文档的加载状态。支持的浏览器是：IE4+,Firefox3.6+，Safari,Chrome和Opera9+；
2.document.compatMode，在标准模式下，值等于CSS1Compat，而在混杂模式下，值等于BackCompat。
if (document.readyState == 'complete') {
//文档加载完毕，执行操作
}
//兼容操作
var head = document.head || document.getElementsByTagName('head')[0];
3.document.head属性，引用文档的<head>元素。支持的浏览器：Safari5,Chrome
-
字符集属性
HTML5也新增了几个与文本相关的字符集。
1.charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。默认值为UTF-16。
2.defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。 -
自定义数据属性
-
插入标记
1.innerHTML 属性返回与调用元素的所有子节点对应的 HTML 标记。在写模式下，innerHTML会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
2.outerHTML 属性在读模式下，该属性返回所有调用它的元素及所有子节点的 HTML 标签。再写模式下，会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。
3.insertAdjacentHTML() 方法接收两个参数，插入位置和要插入的 HTML 文本。
div.innerHTML = 'hello world!';
div.innerHTML = "hello,<b>\""reader\""!</b>";
-
scrollIntoView() 方法
该方法可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就会出现在视口中。如果给这个方法传入true作为参数，或不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如传入false作为参数，调用参数会尽可能全部出现在视口中，可能的话，调用元的底部会与视口顶部平齐。
document.forms[0].scrollIntoView();
专有扩展
-
文档模式
IE8引进了一个新的概念叫做“文档模式”。页面的文档模式决定了可以使用什么功能。换句话说，文档模式决定了你可以使用哪个级别的css，可以在JavaScript中使用那些api，以及如何对待文档模式（doctype）。
要强制浏览器以某种模式渲染页面，可以使用 HTTP 头部信息X-UA-Compatible，或通过等价的<meta>标签来设置：
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
-
children 属性
该属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。支持的浏览器是：IE5,Firefox3.5+，Safari2（有bug）,Safari3，Chrome和Opera8；
var childCount = element.children.length;
var firstChild = element.children[0];
-
contains() 方法
检测是否存在某个的后代节点。支持的浏览器是：IE，Firefox9.5+，Safari，Chrome和Opera9+；
alert(document.documentElement.contains(document.body)); //true
-
插入文本
这两个没有被 HTML5 看中的属性是innerText和outerText。 - 滚动
网友评论