标签：des style blog http color io os 使用 java
（一）DOM扩展
对DOM的主要的扩展是SelectorsAPI（选择符API）和HTML5，还有一个Element Travesal规范。
1.选择符API
jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById( ) 和 getElementsByTagName( ).
Selectors API Level 1的核心是两个方法：querySelector( )和 querySelectorAll( ).
<body>
<ul>
<li>First item</li>
<li class="selected">Second item</li>
<li>Third item</li>
</ul>
<script>
if(document.querySelector){
var body = document.querySelector("body");
alert(body); //[object HTMLBodyElement]
var selected = document.querySelector(".selected");
alert(selected.nodeName); //LI
var img = document.body.querySelector("img.button");
alert(img); //null
}else{
alert("Not Supported QuerySelector");
}
</script>
</body>
通过Document 类型调用querySelector( )方法时，会在文档元素的范围内查找匹配的元素。
而通过Element类型调用querySelector( )方法时，只会在该元素后代元素的范围内查找匹配的元素。
能够调用querySelectorAll( )方法的类型包括Document、DocumentFragment 和 Element。
<body>
<ul>
<li>First item</li>
<li class="selected">Second item</li>
<li>Third item</li>
</ul>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et
it amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> M
auris placerat eleifend leo. <code>commodo vitae</code>, ornare c dui.
<a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<blockquote><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing
elit</strong>. pretium ornare est.</p></blockquote>
<script>
if(document.querySelectorAll){
var em = document.querySelectorAll("em");
//alert(em.length); //1
var strongs = document.querySelectorAll("p strong");
alert(strongs.length);//2
}else{
alert("Not Supported QuerySelectorAll");
}
</script>
</body>
要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法。比如：
<script>
if(document.querySelectorAll){
var strongs = document.querySelectorAll("p strong");
for(var i=0,len = strongs.length;i<len;i++){
strongs[i].className = "important";
}
}else{
alert("Not Supported QuerySelectorAll");
}
</script>
如果要使用这个方法，做好编写一个包装函数。
<script>
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){ //IE 9+
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){ //firefox
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){ //Chrome
return element.webkitMatchesSelector(selector);
}else{
throw new Error("Not supported.") ;
}
}
if(matchesSelector(document.body,"body.page1")){
alert("It‘s the page1!");
}
</script>
2.Element Traversal 规范，元素遍历
对与元素间的空格，IE9及之前版本不会返回文本节点，而其他浏览器都会返回文本节点。这就导致了在使用childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保持DOM规范不变，Element Traversal规范新定义了一组属性。
Element Traversal API 为DOM 元素添加了以下5个属性：
标签：des style blog http color io os 使用 java
原文地址：http://www.cnblogs.com/yanyangbyou/p/3968757.html
