原生強(qiáng)大的DOM選擇器querySelector詳細(xì)介紹（代碼附上）

在傳統(tǒng)的 JavaScript 開發(fā)中，查找 DOM 往往是開發(fā)人員遇到的第一個頭疼的問題，原生的 JavaScript 所提供的 DOM 選擇方法并不多，僅僅局限于通過 tag, name, id 等方式來查找，這顯然是遠(yuǎn)遠(yuǎn)不夠的，如果想要進(jìn)行更為精確的選擇不得不使用看起來非常繁瑣的正則表達(dá)式，或者使用某個庫。事實(shí)上，現(xiàn)在所有的瀏覽器廠商都提供了 querySelector 和 querySelectorAll 這兩個方法的支持，甚至就連微軟也派出了 IE 8 作為支持這一特性的代表，querySelector 和 querySelectorAll 作為查找 DOM 的又一途徑，極大地方便了開發(fā)者，使用它們，你可以像使用 CSS 選擇器一樣快速地查找到你需要的節(jié)點(diǎn)。

querySelector 和 querySelectorAll 的使用非常的簡單，就像標(biāo)題說到的一樣，它和 CSS 的寫法完全一樣，對于前端開發(fā)人員來說，這是難度幾乎為零的一次學(xué)習(xí)。假如我們有一個 id 為 test 的 p，為了獲取到這個元素，你也許會像下面這樣：

document.getElementById("test");
現(xiàn)在我們來試試使用新方法來獲取這個 p：

下面是個小演示：

我是 id 為 test 的 p

感覺區(qū)別不大是吧，但如果是稍微復(fù)雜點(diǎn)的情況，原始的方法將變得非常麻煩，這時候 querySelector 和 querySelectorAll 的優(yōu)勢就發(fā)揮出來了。比如接下來這個例子，我們將在 document 中選取 class 為 test 的 p 的子元素 p 的第一個子元素，當(dāng)然這很拗口，但是用本文的新方法來選擇這個元素，比用言語來描述它還要簡單。

document.querySelector("p.test>p:first-child");
document.querySelectorAll("p.test>p:first-child")[0];

下面是個小演示：

我是層里的 p 標(biāo)簽

現(xiàn)在應(yīng)該對于 querySelector、querySelectorAll 方法中的參數(shù)已經(jīng)非常明白了，是的，它接收的參數(shù)和 CSS 選擇器完全一致。querySelector 和 querySelectorAll 的區(qū)別在于 querySelector 用來獲取一個元素，而querySelectorAll 可以獲取多個元素。querySelector 將返回匹配到的第一個元素，如果沒有匹配的元素則返回 Null。querySelectorAll 返回一個包含匹配到的元素的數(shù)組，如果沒有匹配的元素則返回的數(shù)組為空。在本文最后一個例子中，我們使用 querySelectorAll 給所有 class 為 emphasis 的元素加粗顯示。

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
 emphasisText[i].style.fontWeight = "bold";
}

這是原生方法，比起jquery速度快，缺點(diǎn)是IE6、7不支持。

W3C的規(guī)范與庫中的實(shí)現(xiàn)

querySelector：return the first matching Element node within the node's subtrees. If there is no such node, the method must return null .（返回指定元素節(jié)點(diǎn)的子樹中匹配selector的集合中的第一個，如果沒有匹配，返回null）

querySelectorAll：return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. （返回指定元素節(jié)點(diǎn)的子樹中匹配selector的節(jié)點(diǎn)集合，采用的是深度優(yōu)先預(yù)查找；如果沒有匹配的，這個方法返回空集合）

這在BaseElement 為document的時候，沒有什么問題，各瀏覽器的實(shí)現(xiàn)基本一致；但是，當(dāng)BaseElement 為一個普通的dom Node的時候（支持這兩個方法的dom Node ），瀏覽器的實(shí)現(xiàn)就有點(diǎn)奇怪了，舉個例子：

<p class= "test" id= "testId" > 
 <p><span>Test</span></p> 
</p> 
<script type= "text/javascript" > 
 var testElement= document.getElementById( 'testId' ); 
 var element = testElement.querySelector( '.test span' ); 
 var elementList = document.querySelectorAll( '.test span' ); 
 console.log(element); // <span>Test</span>
 console.log(elementList); // 1 
</script>

按照W3C的來理解，這個例子應(yīng)該返回：element：null；elementList：[];因?yàn)樽鳛閎aseElement的 testElement里面根本沒有符合selectors的匹配子節(jié)點(diǎn)；但瀏覽器卻好像無視了baseElement，只在乎selectors，也就是說此時baseElement近乎document；這和我們的預(yù)期結(jié)果不合，也許隨著瀏覽器的不斷升級，這個問題會得到統(tǒng)一口徑！

人的智慧總是無窮的，Andrew Dupont發(fā)明了一種方法暫時修正了這個怪問題，就是在selectors前面指定baseElement的id，限制匹配的范圍；這個方法被廣泛的應(yīng)用在各大流行框架中；

Jquery的實(shí)現(xiàn)：

var oldContext = context,
old = context.getAttribute( "id" ),
nid = old || id,

try {
	if ( !relativeHierarchySelector || hasParent ) {
 	return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
 	} 
} 
catch (pseudoError) {} 
finally {
	if ( !old ) {
	 	oldContext.removeAttribute( "id" );
	}
}

先不看這點(diǎn)代碼中其他的地方，只看他如何實(shí)現(xiàn)這個方法的；這點(diǎn)代碼是JQuery1.6的片段；當(dāng)baseElement沒有ID的時候，給他設(shè)置一個id = "__sizzle__”，然后再使用的時候加在selectors的前面，做到范圍限制；context.querySelectorAll( "[id='" + nid + "'] " + query ；最后，因?yàn)檫@個ID本身不是baseElement應(yīng)該有的，所以，還需要移除：oldContext.removeAttribute( "id" ); ，Mootools的實(shí)現(xiàn)：

var currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#' + slickid + ' ' + _expression;
context = _context.parentNode;

Mootools和Jquery類似：只不過slickid = 'slickid__'；其實(shí)意義是一樣的；方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement為object；

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

Node.Js實(shí)現(xiàn)端口重用步驟詳解

js繼承中的方法重寫重點(diǎn)講解

js方法的重寫和重載的技巧詳解

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com