第十一章 DOM扩展

选择符API

querySelector():  接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素，返回null.

var aDiv = document.querySelector("div");
console.log(aDiv);

 

querySelectorAll():  接受一个CSS选择符，返回与该模式匹配的所有元素。返回的是一个NodeList实例。

var aDiv = document.getElementById("lga").querySelectorAll("span");
console.log(aDiv);

 

元素遍历

childElementCount:  返回子元素（不包括文本节点和注释）的个数;

firstElementChild:  指向第一个子元素; firstChild元素版;

lastElementChild:  指向最后一个子元素; firstChild元素版;

previousElementSibling: 指向前一个同辈元素，previousSibling元素版。

nextElementSibling: 指向后一个同辈元素，nextSibling元素版。

 

HTML5

getElementsByClassName():  接受一个参数，包含一个或多个类名的字符串，返回带有指定类的所有元素集合。IE9+ 、Safari3.1+、Chrome和Opera9.5+;

var allCurrentUsernames = document.getElementsByClassName("username current");
//取的所有类中 包含 username 和current的元素

document.activeElement： 始终引用DOM中当前获得焦点的元素，

document.hasFocus(): 用于确认文档是否获得了焦点。

 

document.readyState: 有俩个值， loading，正在加载文档。 complate,已加载文档。 可以用来实现一个指示文档已经加载完成的指示器。

if(document.readyState == "complate") {
  //执行操作
}