HTML5学习笔记（二十四）：DOM扩展

DOM扩展

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

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

选择符API

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

querySelector

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

 //获取body元素
 var body = document.querySelector("body");
 //获取ID为"myDiv"的元素
 var r = document.querySelector("#myDiv");
 //获取类为"myClass"的元素
 var r = document.querySelector(".myClass");
 //获取类为"button"的第一个Img元素
 var r = document.querySelector("img.button");

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

querySelectorAll

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

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

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

matchesSelector

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

 if (document.body.matchsSelector(".myClass")) {
   //...
 }

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

元素遍历

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

• childElementCount：获取子元素数量，忽略文本节点和注释。
• firstElementChild：第一个子元素，firstChild的元素版本。
• lastElementChild：最后一个子元素，lastChild的元素版本。
• previousElementChild：同级的上一个元素，previousSibling的元素版本。
• nextElementChild：同级的下一个元素，nextSibling的元素版本。

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

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

 var child = element.firstChild;
 do {
     if (child.nodeType == 1) {
         processChild(child);
     }
     child = child.nextSibiling;
 } while (child != element.lastChild);

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

 var child = element.firstElementChild;
 do {
     processChild(child);
     child = child.nextElementSibiling;
 } while (child != element.lastElementChild);

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

样式相关扩充

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

getElementsByClassName

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

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

焦点管理

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

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

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

文档模式

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

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

 if (document.compatMode == "BackCompat") {
     cWidth = document.body.clientWidth;
     cHeight = document.body.clientHeight;
     sWidth = document.body.scrollWidth;
     sHeight = document.body.scrollHeight;
     sLeft = document.body.scrollLeft;
     sTop = document.body.scrollTop;
 } else { //document.compatMode == "CSS1Compat"
     cWidth = document.documentElement.clientWidth;
     cHeight = document.documentElement.clientHeight;
     sWidth = document.documentElement.scrollWidth;
     sHeight = document.documentElement.scrollHeight;
     sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
     sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
 }

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

字符集处理

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

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

• HTTP响应头部设置，一般用在后端语言中设定；
• 页面嵌入如下标签：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>；
• 通过JS设定document.charset = "UTF-8"；

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

自定义属性

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

 <p id="myP" customData="this is data!">Hello H5!</p>
 <script>
     var myP = document.getElementById("myP");

     // 标准写法
     console.log(myP.hasAttribute("customData")); // true
     console.log(myP.getAttribute("customData")); // this is data!
     myP.setAttribute("customData", 100);
     console.log(myP.getAttribute("customData")); // 100

     // IE
     alert("customData" in myP);
     alert(myP.customData);
     myP.customData = "this is data!";
     alert(myP.customData);
 </script>

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

 <p id="myP" data-custom="this is data!">Hello H5!</p>
 <script>
     var myP = document.getElementById("myP");

     console.log(myP.dataset.hasOwnProperty("custom")); // true
     console.log(myP.dataset.custom); // this is data!
     myP.dataset.custom = 100;
     console.log(myP.dataset.custom); // 100
 </script>

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

插入标记（innerHTML）

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

innerHTML

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

 <div id="myDiv" onclick="onClick();">
     <p>Hello H5!</p>
 </div>
 <script>
     function onClick() {
         var myDiv = document.getElementById("myDiv");
         console.log(myDiv.innerHTML); // <p>Hello H5!</p>
         myDiv.innerHTML = "<h1>This is H1</h1>";
     }
 </script>

需要注意的是，设定innerHTML相当于替换子元素为设定的元素。

outerHTML

和innerHTML不同，outerHTML会给出自身元素及子元素。

 <div id="myDiv" onclick="onClick();">
     <p>Hello H5!</p>
 </div>
 <script>
     function onClick() {
         var myDiv = document.getElementById("myDiv");
         console.log(myDiv.outerHTML); // <div id="myDiv" onclick="onClick();"><p>Hello H5!</p></div>
         myDiv.outerHTML = "<h1>This is H1</h1>";
     }
 </script>

需要注意的是，当元素存在事件监听时需要提前移除事件监听，再改变内部元素。

insertAdjacentHTML

该方法可以动态的插入一段HTML文本，而不修改已经存在的元素，第一个参数接受下面的值：

• beforebegin：在当前元素之前插入元素。
• afterBegin：在第一个子元素之前插入元素。
• beforeend：在最后一个子元素之后插入元素。
• afterend：在当前元素之后插入元素。

第二个参数为要插入的HTML文本。