Javascript-DOM扩展

一、选择符API

Selectors API（www.w3.org/TR/selectors-api/）是由W3C 发起制定的一个标准，致力于让浏览器原生支持CSS 查询。所有实现这一功能的JavaScript 库都会写一个基础的CSS 解析器，然后再使用已有的DOM 方法查询文档并找到匹配的节点。

1、querySelector()方法

querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

var obody = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");
var img = document.body.querySelector("img.button");

2、querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList 的实例。

3、matchesSelector()方法

这个方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

二、遍历元素

三、HTML5

1 、与类相关的扩充

·getElementsByClassName()支持getElementsByClassName()方法的浏览器有**IE 9+**、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+。classList属性`

HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个classList 属性是新集合类型DOMTokenList 的实例。与其他DOM 集合类似，DOMTokenList 有一个表示自己包含多少元素的length 属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
•contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
•remove(value)：从列表中删除给定的字符串。
• toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

2、焦点管理

元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab 键）和在代码中调用focus()方法。
document.activeElement属性 hasFocus()方法

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);   
alert(document.hasFocus()); 

注意：默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是document.body 元素的引用。文档加载期间，document.activeElement 的值为null。

3、HTMLDocument的变化

readyState属性
有两个值：

• loading,正在加载文档
• complete，已经加载完文档

if(document.readyState === "complete"){
}

compatMode 兼容模式
自从IE6 开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。
head属性
HTML5新增的document.head属性

4、字符集属性

document.charset
document.defaultCharset

5、自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可

6、插入标记

innerHTML属性
outerHTML属性

7、scrollIntoView()方法

四、专有方法

children属性
个属性是HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外，children 属性与childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。
contains()方法

alert(document.documentElement.contains(document.body)); //true

innerText
通过innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点
outerText
除了作用范围扩大到了包含调用它的节点之外，outerText 与innerText 基本上没有多大区别。