html5 dom 结构,HTML5 DOM扩展

一.选择符API

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

其中通过Document类型调用querySelector()方法时，会在文档元素范围内查找匹配元素；

如var body =  document.querySelector("body");

通过Element类型调用querySelector()时，只会在该元素后代元素的范围内查找匹配元素

如var img = document.body.querySelector("img.button");

2. querySelectorAll()方法 ：接收一个CSS选择符 ，返回与该模式匹配的所有元素，返回一个Nodelist实例(类Array)若没有匹配到返回null。

所以可以使用Array的一些熟悉如item() [] length

3. matchesSelector()方法：接收一个css选择符，如果调用元素与该选择符匹配，返回true。否则返回false.

二.元素遍历

对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点点。这样会导致用DOM0时使用childNodes和firstChild等熟悉时的行为不一致。为了弥补这一差异 Element Traversal API 为DOM元素添加了一下5个属性：

childElementCount: 返回子元素的个数(不包括文本节点和注释)

firstElementChild: 指向第一个子元素 (firstchild的元素版)

lastElementChild: 指向最后一个子元素 (lastchild的元素版)

previousElementSibling:指向前一个同辈元素

nextElementSibling:指向后一个同辈元素

三.HTML5与JavaScript的扩充

1.getElementsByClassName()方法：接收一个参数包含一个或多个类名字符串(类名的先后顺序不重要)返回带有指定类的所有元素的NodeList。

好处：方便地为带有某些类的元素添加事件处理程序，从而不必再局限于使用ID或标签名

2.HTML5新增了classList属性 来操作类名的。 add(value)：将指定的字符串添加到列表中。如果值已经存在，就不添加了

contain(value)表示列表中是否存在给定的值，如果存在则返回true ；remove(value)从列表中删除给定的字符串；

toggle(value) 如果列表中已经存在给定的值，删除它，如果列表中没有给定的值则添加它。

注：有了classList属性，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则就用不到className属性了

目前支持classList属性的浏览器有Firefox3.6+ 和chrome

3.焦点的管理

首先是document.activeElement属性  获得焦点是document.activeElement属性的值为true 默认情况下文档刚刚加载完成时，

document.activeElement中保存的是document.body元素的引用。文档加载期间，document.ativeElement的值为null.

然后是document.hasFocus()方法 用于确定文档是否获得了焦点

目前实现这两种属性的浏览器包括IE4+ firefox3+ safari4+ chrome 和Opera8+

4.在HTML5中HTMLDocumenet的变化

1.document.readyState属性用于保存两个可能的值一是loading 正在加载文档 二是complete已经加载完文档

以前实现这两种属性的浏览器包括IE4+ firefox3.6+ safari chrome 和Opera9+但现在HTML5纳入了标准

2.document.compatMode的值 在标准模式下是CSS1Compat 在混杂模式是BackCompat

以前实现这两种属性的浏览器包括IE6+ firefox safari3.1+ chrome 和Opera但现在HTML5纳入了标准

3.document.head属性 它与document.getElementByTagName("head")[0]是一样的

可使用 var  head = document.head  || document.getElementByTagName("head")[0] 来实现兼容

4.document.charset HTML5中默认使用的是“UTF-16”  可使用这个属性来进行设置成"UTF-8"

document.defaultCharset属性默认的字符集

支持document.charset 属性的浏览器有IE、firefox safari opera chrome

支持document.defaultCharset属性的浏览器有IE safari chrome

5.如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能便

地知道点击来自页面中的哪个部分 在HTML5中使用创建自定义属性是前面要加一个前缀

目前支持自定义数据属性的浏览器有Firefox6+ 和chrome

6.innerHTML属性返回与调用元素的所有子节点对应的HTML标记(包括元素、注释和文本节点) 使用innerHTML属性有些限制：一是通过

innerHTML插入

outerHTML属性返回调用它的元素及所有子节点的HTML标签；它显示的内容还包括最为一层的标签

支持outerHTML属性的浏览器有IE4+ safari4+ chrome 和Opera8+ firefox8+

insertAdjacentHTML()方法，它是插入标记的新增方式；接收两个参数：插入位置和要插入的HTML文本

第一个参数有4个选项且必须是小写 ：一是beforebegin：在当前元素之前插入一个紧邻的同辈元素 ；二是afterbegin，在当前元素之下插

入一个新的子元素或者在第一个子元素之前再插入新的子元素；三是beforeend：在当前元素之下插入一个新的子元素或者在最后一个子元

素之后再插入新的子元素； 四是afterend，在当前元素之后插入一个紧邻的同辈元素。

如element.insertAdjcentHTML("afterend","

hello world !

")   //作为后一个同辈元素插入

7.HTML5标准scrollIntoview()控制页面滚动 它可以再所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在

视口中

四.专有扩展

1.document.documentMode用于返回IE当前的文档模式。

2.element.children属性与elementchildNodes没有区别，都表示一个节点的子节点数组

3.document.documentElement.contains()通过它可以判断某个节点是不是另一个节点的后代。

相关补充：

Node表示某DOM节点

Node.classList.add();添加一个类名

Node.classList.remover();删除一个类名

Node.classList.contains();检测是否存在一个类名

Node.classList.toggle();切换一个类名(有则删除，无则添加)

X.getAttribute读取一个自定义属性

X.setAttribute设置一个自定义属性

X.dataset获取所有的自定义属性