element.querySelector() 和 element.querySelectorAll()

 element.querySelectorAll()
返回一个nodeList，它包含所有元素的非活动节点，该元素来自与其匹配指定的css选择器组的元素。

语法

   elementList = baseElement.querySelectorAll(selectors)

   elementList  是一个nodeList对象

   baseElement   是一个元素对象

   selectors 一组css选择器

例子

var matches = document.body.querySelectorAll('p');

这个会返回所有body里面的p后代元素

var el = document.querySelector('#test')
var matches = el.querySelectorAll('div.node > p')

这个例子会返回id为test的元素的所欲class属性是node的所有div后代元素的p子元素

var matches = el.querySelectorAll('iframe[data-src]');

返回el元素的的后代元素中所有拥有data-src属相的iframe元素

注意点

   nodeList对象，不推荐使用for....in进行遍历，，这个是因为for in 它会遍历原型上的属性，所以你懂得

   nodeList本身不是数组，所以如果我们想要使用它的方法就必须将他装化成真正的数组。。。

兼容性

   兼容到IE8

element.querySelector()
返回第一个元素，调用它的元素的一个后代，该元素与指定的选择器组匹配

语法

   element = baseElement.querySelector(selectors)

 element和baseElement是element对象

selectors是一个css选择器字符串

let el = document.body.querySelector('#test')

兼容性

   兼容到IE8