前言：
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素，功能類似于jQuery的選擇器
后傳一：與jQuery的區(qū)別
代碼段1：
看以上代碼，想問(wèn)大家一個(gè)問(wèn)題，結(jié)果輸出什么？也就是oDiv 會(huì)獲取到幾個(gè)元素？
A． div2 B. div2 div3 C. div1 div2 div3 D. null
答案是： b 取后代元素，相當(dāng)于jQuery里邊的find
代碼段2：
代碼段1 與 代碼段 2 相比他們的輸出一樣？
HTMLCollection 是一個(gè)接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性。
NodeList 引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)（索引號(hào)由0開(kāi)始）
HTMLCollection 對(duì)象和 NodeList 對(duì)象很相似，但前者可能既能用名稱索引也能用數(shù)字索引。
作者：蘇墨橘鏈接：https://www.zhihu.com/question/34183746/answer/59043879來(lái)源：知乎
proto（隱式原型）與prototype（顯式原型）1.是什么
顯式原型 explicit prototype property：
每一個(gè)函數(shù)在創(chuàng)建之后都會(huì)擁有一個(gè)名為prototype的屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。
隱式原型 implicit prototype link：
JavaScript中任意對(duì)象都有一個(gè)內(nèi)置屬性[[prototype]]，在ES5之前沒(méi)有標(biāo)準(zhǔn)的方法訪問(wèn)這個(gè)內(nèi)置屬性，但是大多數(shù)瀏覽器都支持通過(guò)proto來(lái)訪問(wèn)。ES5中有了對(duì)于這個(gè)內(nèi)置屬性標(biāo)準(zhǔn)的Get方法Object.getPrototypeOf(). Note: Object.prototype 這個(gè)對(duì)象是個(gè)例外，它的proto值為null
二者的關(guān)系：
隱式原型指向創(chuàng)建這個(gè)對(duì)象的函數(shù)(constructor)的prototype
代碼段3：
輸出什么結(jié)果：
A． span1 B. span2 C. span1 span2 D. div2 span1 span2
答案： C
按照jQuery的語(yǔ)法:
答案因該是：span1
原因：、
當(dāng)在一個(gè)DOM元素上調(diào)用querySelector/querySelectorAll的時(shí)候，查找機(jī)制是這樣的：首先在document的范圍內(nèi)進(jìn)行查找所有滿足選擇器條件的元素，在上面這段代碼中，我們的選擇器是div > span，就是所有的直接父元素為div的span元素。然后，再看哪些元素是調(diào)用querySelector/querySelectorAll的元素的子元素，這些元素將會(huì)被返回。
所以，在DOM元素上調(diào)用querySelector/querySelectorAll的時(shí)候要小心，最好加上ID選擇器進(jìn)行一個(gè)限定，例如上面的代碼可以寫成：
或
就會(huì)準(zhǔn)確的返回我們預(yù)期的span1了。
在W3C官方文檔中，有提到使用:context （現(xiàn)已更名為:scope）偽類來(lái)限制選擇器開(kāi)始工作的上下文，也就是說(shuō)，可以這樣寫：
但是實(shí)際測(cè)試的結(jié)果是 Safari 6.0.4 和 Chrome 27 統(tǒng)統(tǒng)沒(méi)有按照預(yù)期工作，因?yàn)閃3C也說(shuō)了，這個(gè)不是標(biāo)準(zhǔn)的。前言：
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素，功能類似于jQuery的選擇器
后傳一：與jQuery的區(qū)別
代碼段1：
看以上代碼，想問(wèn)大家一個(gè)問(wèn)題，結(jié)果輸出什么？也就是oDiv 會(huì)獲取到幾個(gè)元素？
A． div2 B. div2 div3 C. div1 div2 div3 D. null
答案是： b 取后代元素，相當(dāng)于jQuery里邊的find
代碼段2：
代碼段1 與 代碼段 2 相比他們的輸出一樣？
HTMLCollection 是一個(gè)接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性。
NodeList 引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)（索引號(hào)由0開(kāi)始）
HTMLCollection 對(duì)象和 NodeList 對(duì)象很相似，但前者可能既能用名稱索引也能用數(shù)字索引。
作者：蘇墨橘鏈接：https://www.zhihu.com/question/34183746/answer/59043879來(lái)源：知乎
proto（隱式原型）與prototype（顯式原型）1.是什么
顯式原型 explicit prototype property：
每一個(gè)函數(shù)在創(chuàng)建之后都會(huì)擁有一個(gè)名為prototype的屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。
隱式原型 implicit prototype link：
JavaScript中任意對(duì)象都有一個(gè)內(nèi)置屬性[[prototype]]，在ES5之前沒(méi)有標(biāo)準(zhǔn)的方法訪問(wèn)這個(gè)內(nèi)置屬性，但是大多數(shù)瀏覽器都支持通過(guò)proto來(lái)訪問(wèn)。ES5中有了對(duì)于這個(gè)內(nèi)置屬性標(biāo)準(zhǔn)的Get方法Object.getPrototypeOf(). Note: Object.prototype 這個(gè)對(duì)象是個(gè)例外，它的proto值為null
二者的關(guān)系：
隱式原型指向創(chuàng)建這個(gè)對(duì)象的函數(shù)(constructor)的prototype
代碼段3：
輸出什么結(jié)果：
A． span1 B. span2 C. span1 span2 D. div2 span1 span2
答案： C
按照jQuery的語(yǔ)法:
答案因該是：span1
原因：、
當(dāng)在一個(gè)DOM元素上調(diào)用querySelector/querySelectorAll的時(shí)候，查找機(jī)制是這樣的：首先在document的范圍內(nèi)進(jìn)行查找所有滿足選擇器條件的元素，在上面這段代碼中，我們的選擇器是div > span，就是所有的直接父元素為div的span元素。然后，再看哪些元素是調(diào)用querySelector/querySelectorAll的元素的子元素，這些元素將會(huì)被返回。
所以，在DOM元素上調(diào)用querySelector/querySelectorAll的時(shí)候要小心，最好加上ID選擇器進(jìn)行一個(gè)限定，例如上面的代碼可以寫成：
或
就會(huì)準(zhǔn)確的返回我們預(yù)期的span1了。
在W3C官方文檔中，有提到使用:context （現(xiàn)已更名為:scope）偽類來(lái)限制選擇器開(kāi)始工作的上下文，也就是說(shuō)，可以這樣寫：
但是實(shí)際測(cè)試的結(jié)果是 Safari 6.0.4 和 Chrome 27 統(tǒng)統(tǒng)沒(méi)有按照預(yù)期工作，因?yàn)閃3C也說(shuō)了，這個(gè)不是標(biāo)準(zhǔn)的。
