document.querySelector（）和document.querySelectorAll（）方

在css中對特定的元素設(shè)置樣式離不開選擇符的使用，現(xiàn)在一些大的javascript框架也常用選擇符來獲取特定的元素，如jQuery。W3c規(guī)范定義了兩個新的方法（querySelectorAll和querySelectorAll）來獲取元素節(jié)點，這兩個方法都接受選擇符作為自己的參數(shù)。Nicholas在他的《High Performance JavaScript》一書中對這兩個方法作了簡要介紹，并對其性能作了比較，與傳統(tǒng)獲取元素節(jié)點的方法相比，其性能明顯偏優(yōu)。讓我們從下面這個例子說起。

<table id="score">  <thead>    <tr>      <th>Test</th>      <th>Result	  </th>	  </tr>	  </thead>  <tfoot>    <tr>      <th>Average	  </th>      <td>82%	  </td></tr></tfoot>  <tbody>    <tr>      <td>A</td>      <td>87%</td>	</tr>   <tr>      <td>A</td>      <td>87%</td>	</tr>	<tr>      <td>A</td>      <td>87%</td>	</tr>	…	</tbody></table>

上面的1000行表格中，要獲取每行包含成績的單元格，傳統(tǒng)意義上，我們使用以下的方法：

var table = document.getElementById("score");var groups = table.tBodies;var rows = null;var cells = [];for (var i = 0; i < groups.length; i++) {  rows = groups[i].rows;  for (var j = 0; j < rows.length; j++) {    cells.push(rows[j].cells[1]);  }}

使用w3c提供的新方法，僅一行代碼即可完成任務(wù)，而且速度很快。

var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");

我們可以使用《javascript設(shè)計模式》一書中提供的一個“方法性能分析器”來比較這兩個方法的性能，方法如下：

var MethodProfiler = function(component) {  this.component = component;  this.timers = {};  this.log = document.createElement("ul");  var body = document.body;  body.insertBefore(this.log,body.firstChild);  for(var key in this.component) {    // Ensure that the property is a function.    if(typeof this.component[key] !== 'function') {      continue;    }    // Add the method.    var that = this;    (function(methodName) {      that[methodName] = function() {        that.startTimer(methodName);        var returnValue = that.component[methodName].apply(that.component,          arguments);        that.displayTime(methodName, that.getElapsedTime(methodName));        return returnValue;      };    })(key); }};MethodProfiler.prototype = {  startTimer: function(methodName) {    this.timers[methodName] = (new Date()).getTime();  },  getElapsedTime: function(methodName) {    return (new Date()).getTime() - this.timers[methodName];  },  displayTime: function(methodName, time) {  	var li = document.createElement("li");	var text = document.createTextNode(methodName + ': ' + time + ' ms');    li.appendChild(text);	this.log.appendChild(li);  }};

然后將這兩個方法寫入一個對象之中，并用性能分析器對它們進(jìn)行比較.

var obj = {	getElementByTradition:function(){		var table = document.getElementById("score");		var groups = table.tBodies;		var cells = [];		for (var i = 0; i < groups.length; i++) {		  rows = groups[i].rows;		  for (var j = 0; j < rows.length; j++) { 			cells.push(rows[j].cells[1]); 		  } 		} 	}, 	querySelectorAll:function(){ 			var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");		}}var obj = new MethodProfiler(obj);obj.getElementByTradition();obj.querySelectorAll();

查看示例，我們很清楚的看到，新的方法不僅使用簡單，而且性能明顯優(yōu)于我們傳統(tǒng)的方法。注意，盡管IE8已經(jīng)支持這些方法，但是IE8并不支持nth-of-type()選擇器(詳情可參考Compatibility table: CSS3 Selectors)，所以在IE8中會拋出錯誤信息。

當(dāng)調(diào)用document.querySelectorAll（）方法時，將返回節(jié)點數(shù)種的第一個元素節(jié)點，如果沒有匹配的節(jié)點，將返回null，如：

<div id="fooid=">      <p class=id="warningid=">This is a sample warning</p>      <p class=id="errorid=">This is a sample error</p> </div> <div id=id="barid=">      <p>...</p> </div>

使用上面的html，調(diào)用以下方法將返回id屬性為foo的元素。

var obj = document.querySelector("#foo, #bar");alert(obj.innerHTML);//foo

如果去掉id屬性為foo的元素，調(diào)用上面的方法將返回：bar。該方法按照參數(shù)中傳遞的選擇符進(jìn)行查找，如果找到則終止并返回該元素，否則返回null。

調(diào)用document.querySelectorAll（）方法將按順序返回包含在節(jié)點樹中所有匹配的元素，如：

var res = document.querySelectorAll("p.warning, p.error");

上面的res中將選澤文檔中class為“error”或“warning”的所有p元素。

盡管這兩個方法簡單易用，而且性能較高，但是也只有有限的瀏覽器支持這些方法，如IE8、FF3.5、Safari3.1、chrome1、opera10。我們可以在一些應(yīng)用程序中按如下的方法試著使用它們：

if(document. querySelector){	var res = document.querySelectorAll("p.warning, p.error");}else{	//傳統(tǒng)的方法;}

本文只是對這兩個方法作一個簡要的探討，詳情可以了解w3c了解更多。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進(jìn)行捐贈