HTML5 拓展了 querySelector()、querySelectorAll() 和 matchesSelector() 这3种方法，通过 CSS选择器 查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。
obj.querySelector(selector) 方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。该方法既可用于文档 document 类型，也可用于元素element 类型。IE7及以下不支持。
obj.querySelectorAll(selector) 接收一个CSS选择符，返回一个类数组对象，如果没有匹配元素，返回空的类数组对象，而不是null；IE7及以下不支持;
obj.matchesSelector(selector) 方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false；
obj.matchesSelector(selector) 有兼容性问题，IE9+浏览器支持 msMatchesSelector() 方法，firefox 支持 mozMatchesSelector() 方法，safari 和 chrome 支持webkitMatchesSelector() 方法。
<div> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> <li>第五行</li> </ul> </div> <script type="text/javascript"> var oWrapper = document.querySelector('#wrapper'); var oUl = oWrapper.querySelector('ul'); var oLiNo1 = oWrapper.querySelector('.no1'); //obj.querySelector(selector) 方法接收一个CSS选择符，返回与该模式匹配的第一个元素， var oLiFirst = oWrapper.querySelector('li'); var oFirstLi = oWrapper.querySelector('ul > li'); console.log(oLiNo1 === oLiFirst);//true console.log(oLiNo1 === oFirstLi);//true console.log(oLiFirst === oFirstLi);//true console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//第一行 第一行 第一行 //obj.querySelectorAll(selector) 接收一个CSS选择符，返回一个类数组对象 var oWrapperAll = document.querySelectorAll('#wrapper'); console.log(oWrapperAll);//[div#wrapper] console.log(oWrapperAll[0] === oWrapper);//true var oWrapperArray = oWrapperAll[0]; var oLiFirstAll = oWrapperArray.querySelectorAll('li'); var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0]; console.log(oLiFirstArrayNo1 === oLiNo1);//true console.log(oLiFirstAll[1].innerHTML);//第二行 // console.log(oWrapperArray.matchesSelector('#wrapper')); //TypeError: oWrapperArray.matchesSelector is not a function console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true //obj.matchesSelector(selector) 有兼容性问题， //IE9+浏览器支持 msMatchesSelector() 方法， //firefox 支持 mozMatchesSelector() 方法， //safari 和 chrome 支持webkitMatchesSelector() 方法。 </script>
选择器API使用时，需要注意的是：
querySelectorAll() 方法得到的类数组对象是非动态实时的，所以如果要计算长度等的实事值，最好重新获取；当然以前的 getElementById() 之类的就没这个毛病；
selector 类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素；所以如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器；
<div> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> <li>第五行</li> </ul> </div> <script type="text/javascript"> var oWrapper = document.querySelector('#wrapper'); var oUl = oWrapper.querySelector('ul'); var oLiLast = oUl.querySelector('li:last-of-type'); var oLiAll = oUl.querySelectorAll('ul > li'); console.log(oLiLast.innerHTML);//第五行 console.log(oLiAll.length);//5 var newLi = document.createElement('li'); newLi.innerHTML = '新加的Li，放到最后面'; oUl.appendChild(newLi); //querySelectorAll() 方法得到的类数组对象是非动态实时的； console.log(oLiLast.innerHTML);//第五行 console.log(oLiAll.length);//5 console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li，放到最后面 console.log(oUl.querySelectorAll('ul > li').length);//6 </script> <div> <div></div> <div></div> </div> <script type="text/javascript"> var oWrapper = document.querySelector('.wrapper'); //selector 类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。 //这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素 console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2] //这句代码我的理解是获取oWrapper内部子孙元素中，div里嵌套的div，这里没有这种情况，所以应该弹出一个空数组 //如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器 console.log(oWrapper.querySelectorAll('.wrapper div div'));//[] console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2] </script>
以上这篇老生常谈jacascript DOM节点获取就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: