概述
对DOM的两个主要的扩展石Selectors API和HTML5。
一、选择符API
1、querySelector()方法
querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null；
var myDIv=document.querySelector("#divTest");//取得ID为divTest的元素
var selected=document.querySelector(".bd");//取得类为bd的第一个元素2、querySelectAll()方法
//取得<div>中的所有<span>元素
var ems=document.getElementById("divTest").querySelectorAll("span");
var selecteds=document.querySelectorAll(".bd");//取得类为bd的所有元素3、matchSelector()方法
matchSelector()方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
if(document.body.matchSelector(“body.page1”)){
//true
}二、元素遍历
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素。
lastElementChild：指向最后一个元素。
previousElementSibling：指向前一个同辈元素。
nextElementSibling：指向后一个同辈元素。
三、HTML5
1、与类相关的扩充
为了让开发人员适应并增加对class属性的新认识，HTML5增加了很多API，致力于简化CSS类的用法。
（1）、getElementsByClassname()方法
//取得所有类中包含“username”和“current”的元素，类名的先后顺序无所谓
var allCurrentUsernames=document.getElementsByClassName(“username current”);（2）、classList属性
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value )：表示列表中是否存在给定值，如果存在则返回true，否则返回false。
remover(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除他，如果列表中没有给定值，添加他。
<body>
<div id="divTest" class="bd divTest zm" title="body"><span>0</span> <span>1</span> <span>2</span> <span>3</span></div>
<script>
var div=document.getElementById("divTest");
//var div=document.getElementsByClassName("bd divTest zm");
div.classList.remove("zm");
div.classList.add("mm");
div.classList.toggle("user");
if(div.classList.contains("bd") && !div.classList.contains("disabled")){
//确定元素中是否包含既定的类名
}
//迭代类名
for(var i=0,len=div.classList.length;i<len;i++){
alert(div.classList[i]);
}
</script>2、焦点管理
document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
var button=document.getElementById("divTest");
button.focus();
alert(document.activeElement);//button
document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button=document.getElementById("divTest");
button.focus();
alert(document.hasFocus());3、HTMLDocument变化
（1）、readyState属性
Document的readyState属性有两个可能的值：
loading：正在加载文档；
complete：已经加载完文档；
通过他来实现一个指示文档已经加载完成的指示器。要实现一个指示器必须借助onload事件处理程序设置一个标签，表明文档已经加载完毕。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function aa(){
if(document.readyState=="complete"){
alert("文档加载完成");
}
}
</script>
<title>无标题文档</title>
</head>
<body οnlοad="aa()">
</body>
</html>（2）兼容模式
if(document.compatMode=="CSS1Compat"){
alert("标准模式");
}else{
alert("混杂模式");
}（3）head属性
var head=document.head || document.getElementsByTagName(“head”)[0];4、字符集属性
charset属性表示文档实际使用的字符集，也可以用来指定新字符集。
alert(document.charset);
document.charset="utf-8";defaultCharset属性，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
alert(document.charset);//utf-8
alert(document.defaultCharset);//gbk
if(document.charset!=document.defaultCharset){
alert("字符集不一致");
}5、自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
var div=document.getElementById("divTest");
var appid=div.dataset.appid;
alert(appid);
div.dataset.appid=12322435;6、插入标记
在需要给文档插入大量新HTML标记的情况下，通过DOM操作仍然非常麻烦。innerHTML属性
document.getElementById("divTest").innerHTML="<b>My First JavaScript</b>";
7、scrollIntoView()方法
document.forms[0].scrollIntoView();//让元素可见四、专有扩展
1、文档模式
var mode=document.documentMode;2、children属性
children属性与childNodes没有什么区别。
3、contains()方法
4、插入文本
document.getElementById("divTest").innerText="<b>My First JavaScript</b>";
最后
以上就是无情电话为你收集整理的JavaScript：DOM扩展的全部内容，希望文章能够帮你解决JavaScript：DOM扩展所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![DOM扩展：DOM API的进一步增强[总结篇-上]](/uploads/reation/bcimg8.png)
![DOM扩展：DOM API的进一步增强[总结篇-下]](/uploads/reation/bcimg9.png)
发表评论 取消回复