首页 > 代码库 > JavaScript学习笔记（十一）---- DOM扩展
JavaScript学习笔记（十一）---- DOM扩展
（一）DOM扩展
对DOM的主要的扩展是SelectorsAPI（选择符API）和HTML5，还有一个Element Travesal规范。
1.选择符API
jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById( ) 和 getElementsByTagName( ).
Selectors API Level 1的核心是两个方法：querySelector( )和 querySelectorAll( ).
- querySelector( ):接收一个css选择符，返回与该模式匹配的第一个元素。如果没有找到匹配的元素，则返回null。
<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( )方法：接收参数也是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。返回一个NodeList对象。
能够调用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="http://www.mamicode.com/#">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>
- matchesSelector( )方法：接收参数也是CSS选择符，如果调用元素与该元素符匹配，返回true；否则返回false。
如果要使用这个方法，做好编写一个包装函数。
<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个属性：
- childElementCount：返回子元素的个数（不包括文本节点和注释）。
- firstElementChild：指向第一个子元素；firstChild的元素版。
- lastElementChild：指向最后一个子元素；lastChild的元素版。
- previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
- nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
JavaScript学习笔记（十一）---- DOM扩展
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。