前言：
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器
后传一：与jQuery的区别
代码段1：
看以上代码，想问大家一个问题，结果输出什么？也就是oDiv 会获取到几个元素？
A． div2 B. div2 div3 C. div1 div2 div3 D. null
答案是： b 取后代元素，相当于jQuery里边的find
代码段2：
代码段1 与 代码段 2 相比他们的输出一样？
HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。
NodeList 引号来访问列表中的节点（索引号由0开始）
HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。
作者：苏墨橘链接：https://www.zhihu.com/question/34183746/answer/59043879来源：知乎
proto（隐式原型）与prototype（显式原型）1.是什么
显式原型 explicit prototype property：
每一个函数在创建之后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象。
隐式原型 implicit prototype link：
JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过proto来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). Note: Object.prototype 这个对象是个例外，它的proto值为null
二者的关系：
隐式原型指向创建这个对象的函数(constructor)的prototype
代码段3：
输出什么结果：
A． span1 B. span2 C. span1 span2 D. div2 span1 span2
答案： C
按照jQuery的语法:
答案因该是：span1
原因：、
当在一个DOM元素上调用querySelector/querySelectorAll的时候，查找机制是这样的：首先在document的范围内进行查找所有满足选择器条件的元素，在上面这段代码中，我们的选择器是div > span，就是所有的直接父元素为div的span元素。然后，再看哪些元素是调用querySelector/querySelectorAll的元素的子元素，这些元素将会被返回。
所以，在DOM元素上调用querySelector/querySelectorAll的时候要小心，最好加上ID选择器进行一个限定，例如上面的代码可以写成：
或
就会准确的返回我们预期的span1了。
在W3C官方文档中，有提到使用:context （现已更名为:scope）伪类来限制选择器开始工作的上下文，也就是说，可以这样写：
但是实际测试的结果是 Safari 6.0.4 和 Chrome 27 统统没有按照预期工作，因为W3C也说了，这个不是标准的。前言：
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器
后传一：与jQuery的区别
代码段1：
看以上代码，想问大家一个问题，结果输出什么？也就是oDiv 会获取到几个元素？
A． div2 B. div2 div3 C. div1 div2 div3 D. null
答案是： b 取后代元素，相当于jQuery里边的find
代码段2：
代码段1 与 代码段 2 相比他们的输出一样？
HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。
NodeList 引号来访问列表中的节点（索引号由0开始）
HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。
作者：苏墨橘链接：https://www.zhihu.com/question/34183746/answer/59043879来源：知乎
proto（隐式原型）与prototype（显式原型）1.是什么
显式原型 explicit prototype property：
每一个函数在创建之后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象。
隐式原型 implicit prototype link：
JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过proto来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf(). Note: Object.prototype 这个对象是个例外，它的proto值为null
二者的关系：
隐式原型指向创建这个对象的函数(constructor)的prototype
代码段3：
输出什么结果：
A． span1 B. span2 C. span1 span2 D. div2 span1 span2
答案： C
按照jQuery的语法:
答案因该是：span1
原因：、
当在一个DOM元素上调用querySelector/querySelectorAll的时候，查找机制是这样的：首先在document的范围内进行查找所有满足选择器条件的元素，在上面这段代码中，我们的选择器是div > span，就是所有的直接父元素为div的span元素。然后，再看哪些元素是调用querySelector/querySelectorAll的元素的子元素，这些元素将会被返回。
所以，在DOM元素上调用querySelector/querySelectorAll的时候要小心，最好加上ID选择器进行一个限定，例如上面的代码可以写成：
或
就会准确的返回我们预期的span1了。
在W3C官方文档中，有提到使用:context （现已更名为:scope）伪类来限制选择器开始工作的上下文，也就是说，可以这样写：
但是实际测试的结果是 Safari 6.0.4 和 Chrome 27 统统没有按照预期工作，因为W3C也说了，这个不是标准的。
