高程 第11章 DOM扩展

对DOM的两个主要的扩展是SelectorsAPI和HTML5。

11.1选择符API

SelectorsAPILevel1的核心是两个方法：querySelector()和querySelectorAll().

SelectorsAPILevel2为Element类型新增了一个方法matchsSelector().这接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

可以为matchesSelector()封装一个函数

functionmatchsSelector(element,selector){
if(element.matchsSelector){
returnelement.matchsSelector(selector);
}elseif(element.msMatchesSelector){
returnelement.msMatchesSelector;
}elseif(element.mozMatchesSelector){
returnelement.mozMatchesSelector;
}elseif(element.webkitMatchesSelector){
returnelement.webkitMatchesSelector;
}else{
thrownewError("Notsupported.");
}
}

11.2元素遍历

childElementCount,firstElementChild,lastElementChild,previousElementSibling,nextElementSibling.

11.3HTML5

getElementsByClassName().

classList的几个方法：add(value),contains(value),remove(value),toggle(value).

document.activeElement:这个属性始终会引用DOM中当前获得了焦点的元素。

元素获得焦点的方式页面加载，用户输入（通常通过按Tab键）和在代码中调用focus（）方法。

document.hasFocus()，用于确定文档是否获得了焦点。

通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。

document.readyState有两个可能值：loading或complete。

document.compatMode的值：CSS1Compat(标准)，BackCompat(混杂模式).

varhead=document.head||document.getElementsByTagName('head')[0];

如果文档没有使用默认字符集，那charset和defaultCharset属性的值不一样。

自定义属性，前缀加data-。

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。

innerHTML属性，不同浏览器返回文本格式会有所不同。

outerText

scrollIntoView(),

scrollIntoViewIfNeeded(alignCenter),

scrollByLines(lineCount),

scrollByPages(pageCount).

11.4专有扩展

IE5：以混杂模式渲染页面

IE7：以IE7标准模式渲染页面。

IE8：以IE8标准模式渲染页面。

IE9：以IE9标准模式渲染页面。

Edge:始终以最新的文档模式来渲染页面。忽略文档类型声明。

EmulateIE9：如果有文档类型声明，则以IE9标准模式渲染页面，否则将文档模式设置为IE5。

EmulateIE8：如果有文档类型声明，则以IE8标准模式渲染页面，否则将文档模式设置为IE5。

EmulateIE7：如果有文档类型声明，则以IE7标准模式渲染页面，否则将文档模式设置为IE5。

9：强制以IE9标准模式渲染页面，忽略文档类型声明。

8：强制以IE8标准模式渲染页面，忽略文档类型声明。

7：强制以IE7标准模式渲染页面，忽略文档类型声明。

5：强制将文档模式设置为IE5，忽略文档类型声明。

没有规定说必须在页面中设置X—UA-Compatible，默认情况下，浏览器会通过文档类型声明来确定是使用最佳的可用文档模式，还是使用混杂模式。

children属性

contains()方法

使用DOMLevel3compareDocumentPosition()也能够确定节点间的关系。

functioncontains(refNode,otherNode){
if(typeofrefNode.contains=="function"&&(!client.engine.webkit||client.engine.webkit>=522)){
returnrefNode.contains(otherNode);
}elseif(typeofrefNode.compareDocumentPosition=="function"){
return!!(refNode.compareDocumentPosition(otherNode)&16);
}else{
varnode=otherNode.parentNode;
do{
if(node===refNode){
returntrue;
}else{
node=node.parentNode;
}
}while(node!==null);
returnfalse;
}
}

innerText属性

outerText属性

textContent是DOMLevel3规定的一个属性。

functiongetInnerText(element){
return(typeofelement.textContent=="string")?element.textContent:element.innerText;
}

functionsetInnerText(element,text){
if(typeofelement.textContent=="string"){
element.textContent=text;
}else{
element.innerText=text;
}
}

11.5小结

SelectorsAPI,定义了两个方法，让开发人员能够CSS选择符从DOM中取得元素，这两个方法是querySelector()和querySelectorAll().

ElementTraversal,为DOM元素定义了额外的属性，让开发人员能够更方便地从一个元素跳到另一个元素。