javascript高级选择器querySelector和querySelectorAll全面解析_
下面我就为大家带来一篇javascript高级选择器querySelector和querySelectorAll全面解析。我觉得挺不错的，现在分享给大家，也给大家做个参考。
querySelector 和querySelectorAll 方法是W3C Selectors API 规范中定义的。他们的作用是依据 CSS 选择器规范，便捷定位文档中指定元素。
目前几乎主流扫瞄器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接口：
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合css selector 的字符串。不同的是
querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
猎取页面I属性D为test的元素：
ElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];
猎取页面class属性为”red”的元素:
document.querySelector('.red')
document.querySelectorAll('.red')
ps:
但需要留意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区分什么是实时非实时的返回结果，请看下例：
div id="container"
div/div
div/div
/div
//首先选取页面中id为container的元素
ElementById('#container');    console.log(container.childNodes.length)//结果为2    //然后通过代码为其添加一个子元素
container.ateElement('div') );
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3  通过上面的例子就很好地理解了什么是会实时更新的元素。ElementById返回的便是实时结果，上面对其添加一个子元素后，再次猎取全部子元素个数，已经由原来的2个更新为3个(这里不考虑有些扫瞄器比如Chrome 会把空白也解析为一个子节点)。
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区分：
SPAN divid="test1"ahref=".jb51/"脚本之家/a/div
pid="bar"111/p
script
queryselectorall用法var d1 = ElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//a href=".jb51/"脚本之家/a
console.log(obj2.length)//1
console.log(obj3)//null
/script
/
SPAN
querySelectorAll 在文档内全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内全部符合选择器描述的节点不包括Element本身
以上这篇javascript高级选择器querySelector和querySelectorAll全面解析就是我分享给大家的全部内容了，盼望能给大家一个参考
...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。