html5简化后的字符集定义,HTML5学习笔记（二十四）：DOM扩展

DOM扩展

DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能，后被收录为标准的DOM相关API。

本笔记只记录被各大浏览器支持的标准扩展，对于特定浏览器的专有扩展不讨论。

选择符API

我们知道，在JS获取一个元素时一般通过id查找(使用getElementById方法)，或者通过标签查找(使用getelementsByTagName方法)，在实际使用中，我们更希望可以通过类似CSS选择器的方式来查找到需要的元素，JS的选择符API就可以满足我们的需求。

querySelector

该方法接收一个CSS选择符，返回匹配该模式的第一个匹配项，如果没有匹配项则返回null。

1 //获取body元素

2 var body = document.querySelector("body");3 //获取ID为"myDiv"的元素

4 var r = document.querySelector("#myDiv");5 //获取类为"myClass"的元素

6 var r = document.querySelector(".myClass");7 //获取类为"button"的第一个Img元素

8 var r = document.querySelector("img.button");

需要注意的是如果传递了不支持的选择符，方法会报错。

querySelectorAll

和上面的方法功能类似，不一样的是会返回匹配的所有项目数组，如果没有则返回一个空数组。

1 //获取myDiv中所有em元素

2 var ems = document.getElementById("myDiv").querySelectorAll("em");3 //获取类为myClass的所有元素

4 var r = document.querySelectorAll(".myClass");5 //获取所有p元素中的div元素

6 var r = document.querySelectorAll("p div");

得到的数据通过遍历即可处理单个元素。

matchesSelector

判断指定元素是否和CSS选择器匹配，如果匹配返回true，否则返回false。

1 if (document.body.matchsSelector(".myClass")) {2 //...

3 }

可以在实际获取元素之前进行匹配判断。

元素遍历

当我们需要对子元素进行遍历的时候，可以使用下面的API：

childElementCount：获取子元素数量，忽略文本节点和注释。

firstElementChild：第一个子元素，firstChild的元素版本。

lastElementChild：最后一个子元素，lastChild的元素版本。

previousElementChild：同级的上一个元素，previousSibling的元素版本。

nextElementChild：同级的下一个元素，nextSibling的元素版本。

需要注意的是，这些方法在老浏览器中并不支持，如IE8，Firefox3.5以下等。

我们先看看可以跨老版本浏览器的写法：

1 var child =element.firstChild;2 do{3 if (child.nodeType == 1) {4 processChild(child);5 }6 child =child.nextSibiling;7 } while (child != element.lastChild);

下面是新的元素遍历写法：

1 var child =element.firstElementChild;2 do{3 processChild(child);4 child =child.nextElementSibiling;5 } while (child != element.lastElementChild);

实际上可以省略掉是否为元素的判断。

样式相关扩充

在HTML5中新增了许多API来简化对文档的操作，曾经需要第三方类库才能实现的功能得到了更高效的原生实现。

getElementsByClassName

根据CSS类名获取所有元素，可以传递多个类名，用空格分隔。

使用该方法可以方便的为指定的一种类型的所有元素统一进行处理，不需要使用id或者子元素遍历的方法了。

焦点管理

通过调用元素的focus方法可以使该元素获得焦点。

document.activeElement可以得到当前获取了焦点的元素。

document.hasFocus方法可以判断指定元素是否获得焦点。

文档模式

在IE中，存在两种文档模式，CSS1Compat表示标准模式，而BackCompat表示混合模式。

通过document.compatMode可以判断当前属于那种模式下，不同的模式下获取浏览器网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码是有差异的，通用的处理函数如下：

1 if (document.compatMode == "BackCompat") {2 cWidth =document.body.clientWidth;3 cHeight =document.body.clientHeight;4 sWidth =document.body.scrollWidth;5 sHeight =document.body.scrollHeight;6 sLeft =document.body.scrollLeft;7 sTop =document.body.scrollTop;8 } else { //document.compatMode == "CSS1Compat"

9 cWidth =document.documentElement.clientWidth;10 cHeight =document.documentElement.clientHeight;11 sWidth =document.documentElement.scrollWidth;12 sHeight =document.documentElement.scrollHeight;13 sLeft = document.documentElement.scrollLeft == 0 ?document.body.scrollLeft : document.documentElement.scrollLeft;14 sTop = document.documentElement.scrollTop == 0 ?document.body.scrollTop : document.documentElement.scrollTop;15 }

现在文档模式也被纳入到HTML5的标准中了。

字符集处理

HTML5中新增了对当前页面进行字符集处理的函数。

现在设定页面的字符集有以下3个方式：

HTTP响应头部设置，一般用在后端语言中设定；

页面嵌入如下标签：；

通过JS设定document.charset = "UTF-8"；

另外添加了document.defaultCharset属性，可以获取浏览器默认的字符集。

自定义属性

在标签中，我们可以定义自己的属性，该方法兼容所有浏览器：

1 Hello H5!

2

3 varmyP=document.getElementById("myP");4

5 //标准写法

6 console.log(myP.hasAttribute("customData"));//true

7 console.log(myP.getAttribute("customData"));//this is data!

8 myP.setAttribute("customData",100);9 console.log(myP.getAttribute("customData"));//100

10

11 //IE

12 alert("customData" inmyP);13 alert(myP.customData);14 myP.customData= "this is data!";15 alert(myP.customData);16

另外在HTML5中，也提供了自定义的数据属性，需要添加data-前缀，使用元素的dataset属性访问自定义的属性，如下：

1 Hello H5!

2

3 varmyP=document.getElementById("myP");4

5 console.log(myP.dataset.hasOwnProperty("custom"));//true

6 console.log(myP.dataset.custom);//this is data!

7 myP.dataset.custom= 100;8 console.log(myP.dataset.custom);//100

9

需要注意的是data-自定义属性的方法并不被所有浏览器支持。

插入标记(innerHTML)

虽然DOM为操作节点提供了丰富的API，但是如果纯使用DOM的API来操作节点会显得非常的繁琐，在早期IE就提供了直接使用HTML标签字符串添加DOM的属性innerHTML和outterHTML，现在这两个属性已经成为了HTML5中的标准。

innerHTML

读取或设置指定元素的所有子元素HTML标记字符串，如下：

1

2

Hello H5!

3