第十一章Dom扩展
11.1选择符API
<pre>querySelector()方法 & querySelectorAll()方法 & matchesSelector()方法
querySelector()接收一个css选择符，返回与该模式匹配的第一个元素，若无返回null
querySelectorAll()接收一个css选择符，返回一个NodeList实例.若无匹配则NodeList为空
matchesSelector()接收一个css选择符，如果调用元素与该选择符匹配则返回true ，否则返回false
var ems = document.getElementById("myDiv").querySelectorAll("img");//取出id为mydiv中的所有img元素
var selecteds = document.querySelectorAll(".img");//取出类名为myimage的所有元素
var strongs = document.querySelectorAll("p strong");//取出所有元素中的元素
console.log(ems);
console.log(selecteds);
console.log(strongs);
//由于对matchesSelector()的支持 不同浏览器的支持方式不同，因此定义如下包装函数
function matchesSelector(element,selector){
if(element.matchesSelector){//
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){//IE9+通过msMatchesSelector支持该方法
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){//Firefox3.6+
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){//Safari5+和chrome
return element.webkitMatchesSelector(selector);
}else{
throw new Error("Not support");
}
}
if(matchesSelector(document.body,"body.page1")){
//执行某操作
}
*/
//11.2 元素遍历
//对于元素间的空格IE<=9都不会返回文本节点，而其他浏览器都会返回文本节点。这样导致了childnodes和firstchild等属性的行为不一致。
//Element Traversal规范新定义了一组属性
//Element Traversal API为DOM添加了一下5个属性
/*
childElementCount:返回子元素（不包括文本节点和注释）的个数
firstElementChild:指向第一个子元素；firstChild 的元素版
lastElementChild:指向最后一个子元素；lastChild 的元素版
previousElementSibling:指向前一个同辈元素；previousSibling的元素版
nextElementSibling:指向前下个同辈元素；nextSibling的元素版
*/
//过去遍历元素
/*
var processChild = function(o){
//执行某些操作
}
var element = document.getElementById("myDiv");
var i,
len,
child = element.firstChild;
while(child != element.lastChild){//判断条件用于确保遍历的是元素而非空格文本节点
if(child.nodeType == 1){
processChild(child);
}
child = child.nextSibling;
}
通过利用Element Traversal新增的属性，可将上述遍历代码简化为
var processChild = function(o){
//执行某些操作
}
var element = document.getElementById("myDiv");
var i,
len,
child = element.firstElementChild;
while(child != element.lastElementChild){//判断条件用于确保遍历的是元素而非空格文本节点
//已知为元素节点，无需进行判定
processChild(child);
child = child.nextElementSibling;
}
*/
//11.3 HTML5
//11.3.1与类相关的扩充
//getElementsByClassName()方法接收一个参数（包含一个或多个类名的字符串），返回带有制定类的所有元素的NodeList，传入类名无先后顺序
//在document对象上调用getElementByClassName方法返回所有document下与类名匹配的元素，在元素上调用该方法返回其后代元素中匹配元素
//classList属性
//chrome与Firefox支持
//h5通过添加了操作类名的classList属性简化了使用className删除元素的某个类名（该元素含多个类名）
//classList是新集合类型DOMTokenList的实例。具有length属性
//classList方法有add(value),contains(value),remove(value),toggle(value)
//add(value)将给定的字符串值增加到列表中
//contains(value)表示列表中是否存在给定的值，存在返回true，否则返回false
//remove(value)从列表中删除给定字符串
//toggle(value)若列表中存在给定字符串则删除，若无则添加
//删除user类
//注var classNameS = div.className.split(/\s+/);//\s+/ 匹配任何空白符，包括\n,\r,\f,\t,\v等（换行、回车、空格、tab等）
/*div.classList.remove("user");*/
//有了classList属性，除非需要删除所有类名或是完全重写元素的class属性，否则无需使用className
//11.3.2焦点管理
//HTML5添加了辅助管理Dom焦点的功能
//查询文档获知哪个元素获得了焦点&确定文档是否获得了焦点 =>提高web应用的无障碍性
web应用的无障碍性开发http://www.520ued.com/article/53f35ae001d6b9d85c63dfe6
//document.activeElement 属性 & document.hasFocus()方法
//document.activeElement属性始终引用DOM中当前获得了焦点的元素
//元素获得焦点的方式有页面加载，用户输入（通常是通过tab键），和在代码中调用focus()方法
//.document.activeElement实例
/*
var button = document.getElementById("myButton");
console.log(document.activeElement === button);//False
button.focus();
console.log(document.activeElement === button);//True
*/
//document.hasFocus()方法，确定文档是否获得了焦点
//通过检测文档是否获得了焦点可以知道用户是否正在与页面进行交互
var button = document.getElementById("myButton");
button.focus();
console.log(document.hasFocus());
<html lang="zh-cn">与<meta chartset="utf-8"> 区别：一个是网站编码格式.。一个是浏览器语言环境.
