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文本。