选择符API
Selectors API是由W3C发起制定的一个标准。致力于让浏览器原生支持CSS查询。
querySelector()方法
此方法接收一个CSS选择符,返回与该模式匹配的第一个元素。如果没有找到返回null.
var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selector");
var img = document.body.querySelector("img.button");
如果传入了不被支持的选择符,querySelector()方法会抛出错误。
querySelectorAll()方法
接收的参数与querySelector()方法一样,但是返回的是一个NodeList的实例。
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
matchesSelector()方法
传入一个css选择符,如果调用元素与该选择符匹配,则返回true.很多浏览器还没有支持matchesSelector()方法,各个浏览器实现的方法不同。如果要用则写过包装函数。
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelctor(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
throw new Error("not supported");
}
}
元素遍历
对于元素间的空格,IE9及之前的版本不会返回文本节点,而其他浏览器都会返回文本节点。
为了弥补这一差异,Element Traversal规范新定义了一组属性。
childElementCount:返回子元素(不包括文本节点和注释)的个数。
firstElementChild:指向第一个子元素
lastElementChild:指向最后一个子元素。
previousElementSibling:指向前一个同辈元素。
nextElementSibling:指向后一个同辈元素。
HTML5扩展DOM
- getElementsByClassName()方法:接收一个参数,一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。
var selected = document.getElementById("myDiv").getElementByClassName("selected");
- classList属性:HTML5新增了一种操作类名的方式。可以让操作更简单更安全。这个classList属性时新集合类型DOMTokenList的实例。DOMTokenList有个length属性,并有以下方法:
add(value):将给定的字符串添加到列表中。
contains(value):表示列表中是否存在给定的值。
remove(value):从列表中删除指定的字符串。
toggle(value):如果存在则删除,不存在则添加。
<div class="bd user disabled">...</div>
div.classList.remove("disabled");
div.classList.add("current");
支持classList属性的浏览器有Firefox3.6+和Chrome.
焦点管理
HMTL5也添加了管理DOM焦点的功能。
document.activeElement:这个属性始终会引用DOM中当前获得了焦点的元素。
var button = document.getElementById("muButton");
button.focus();
alert(document.activeElement == button);//true
document.hasFocus()方法:用于确定文档是否获得了焦点。
HTMLDocument的变化
HTML5扩展了HTMLDocument。
1. readyState属性:有两个可能的值:loading(正在加载文档(,complete(已经加载文档).
if(document.readyState == "complete"){
//执行操作
}
- 兼容模式
为了区分页面的模式是标准的还是混杂的。IE为此给document添加了一个名为compatMode的属性。标准模式下,document.compatMode的值为”CSS1Compat”,混杂模式下为”BackCompat”.
document.head引用文档的元素。
document.charset:文档中实际使用的字符集。
document.defaultCharset:浏览器设置的文档默认的字符集。
自定义数据属性
HTML5规定可以为元素添加非标准的属性,但要添加前缀data-.
<div id="mydiv" data-appId="12345" data-myname="nicholas"></div>
可以通过元素的dataset属性来访问自定义属性的值。
var appId = div.dataset.appId;
var myName = div.dataset.myname;
插入文本
innerText:但firefox不支持
textContent:firefox支持
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent:element.innerText;
}
css规则
CSSRule对象表示样式表中的每一条规则。
div.box{
background-color:blue;
width:100px;
height:200px;
}
假设这条规则位于页面中的第一个样式表中。
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;//取得规则列表
var rule = ruless[0];
alert(rule.selectorText);//div.box
alert(rule.style.cssText);//完整的CSS代码
alert(rule.style.backgroundColor);//blue
创建规则
insertRule(规则文本,表示在哪里插入规则的索引).
sheet.insertRule("body{backgournd-color:silver}",0);
但IE8及更早版本不支持此方法,而是另外一个方法:
sheet.addRule("body{backgournd-color:silver}",0);
删除规则
deleteRule(pos):接受一个参数,要删除的规则的位置。
IE支持的方法removeRule()。
元素大小
- 偏移量。
offsetHeight:元素在垂直方向上占用的空间大小。以像素计。包括元素的高度,水平滚动条的高度、上边框高度和下边框高度。
offsetWidth:元素在水平方向上占用的空间大小。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
offsetParent:对包含元素的引用。
取得元素的左偏移量(上偏移量类似原理)。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != null){
acrualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
所有这些偏移量都是只读的,而且每次访问他们都需要重新计算。因此尽量避免重复访问这些属性。
2. 客户区大小
指的是元素内容及其内边距所占据的空间大小。
clientWidth:元素内容区域宽度加上左右内边距宽度。
clientHeight:元素内容高度加上上下内边距高度。
3. 滚动大小
scrollHeight:在没有滚动条的情况下,元素内容的总高度。
scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可变改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数。
遍历
“DOM2级遍历和范围”模块定义了两个用于完成顺序遍历DOM结构的类型:NodeIterator和TreeWalder.
能够基于给定的起点对DOM结构执行深度优先的遍历操作。检测浏览器是否支持:
var supportsTraversals = document.implementation.hasFeature("Traversal","2.0);
var supportNodeIterator= (typeof document.createNodeIterator == "function");
var supportTreeWalder = (typeof document.createTreeWalder == "function");
document.createNodeIterator()方法接收四个参数:
root:想要作为搜索起点的树中的节点。
whatToShow:表示要访问那些节点的数字代码。
filter:一个NodeFilter对象,或者一个表示接受还是拒绝某种特定节点的函数。
entityReferenceExpansion:布尔值,表示是否要扩展实体引用。在HTML中没有用。
whattoShow参数是一个位掩码。
NodeFilter.SHOW_ALL:显示所有类型的的节点。
NodeFilter.SHOW_ELEMENT:显示元素节点。
NodeFilter.SHOW_TEXT:显示文本节点。
等等。
可以使用按位或操作符来组合多个选型。
var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
filter参数:可以传入一个NodeFilter对象或者一个函数。
每个NodeFilter对象只有一个方法,及acceptNode()方法。如果应该访问给定的节点该方法返回NodeFilter.FILTER_ACCEPT,如果不应该访问则返回NodeFilter.FILGER_SKIP。
传入的函数与acceptNode()方法类似。
var filter = {
acceptNode:function(node){
return node.tagName.toLowerCase() == "p"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
};
var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
NodeIterator对象有两个方法,nextNode()和previousNode()。第一次调用nextNode()返回根节点。
var div = document.getElementById("mydiv");
var filter = function(node){
return node.tagName.toLowerCase() == "li"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
var node = iterator.nextNode();
while(node !== null){
alert(node.tagName);
node = iterator.nextNode();
}
TreeWalker
TreeWalker是NodeIterator的一个更高级的版本。增加了很多方法。
parentNode():
firstChild():
lastChild():
nextSibling():
previousSibling():
document.createTreeWalker():同document.createNodeIterator方法一样接收四个参数。
var walker = document.createTreeWalder(root,NodeFilter.SHOW_ELEMENT,filter,false);
TreeWalker类型还有一个currentNode属性。由于IE中没有TreeWalker类型,所有使用遍历的跨浏览器解决方案非常少。
范围
后续补上