本文原始地址链接： http://blog.csdn.net/Zhou _ Xiao _ cheng/article/details/53414993，未经博客许可不得转载。
以前，在使用JavaScript获取文档元素的文章中，介绍了获取文档元素的几种方法。 最后一种方法是通过选择器获取文档元素。 其核心思想是利用querySelector () (或querySelectorAll ) )方法检索文档元素。 这两种方法的区别在于本文中介绍的内容。
查询选择器()。 可以对文档或Element类型调用此方法。
html:divid=' item ' class=' class name1' divclass=' class name1'/divdivclass=' class name2'/div/div js1 (docum divdivclass=' class name2'/div/div js2 (element类型调用此方法) ) varelelent Element的console.log (element type.log ) 输出结果： div class='className1'/div表示调用Document类型为querySelector ) )方法时，将在文档元素的范围内搜索匹配元素。 在Element类型上调用querySelector ()方法时，仅会在该元素的子元素中查找匹配的元素。 如果不存在匹配元素，则在两种类型调用该方法时返回null。
querySelectorAll (。 可以从文档、文档框架或元素类型中调用此方法。
html:divid=' item ' class=' class name1' divclass=' class name1'/divdivclass=' class name2'/div/divjs1(docummum输出结果：非实时NodeList对象js2 (元素类型调用此方法(varelementtype=document.getelementbyid ) ' itement 获取Element对象的console.log (element type.queryselectorall ('.class name1' ) )； 输出结果：非实时NodeList对象从querySelectorAll ()方法返回的非实时NodeList对象应如下图所示。
JS1:
JS2:
JS1输出的NodeList对象的长度为2，并且包含与类选择器. className1匹配的所有Element对象。 另一方面，JS2输出的NodeList对象的长度为1，只有Element元素的后代与类选择器中的Element对象匹配。 说明：如果在Element类型上调用queent对象时没有匹配的对象，则在Document和Element两种类型都调用方法时，将返回空的NodeList对象。