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

在css中对特定的元素配置样式离不开选择符的行使，此刻一些大的javascript框架也常用选择符来获取特定的元素，如jQuery。W3c类型界说了两个新的要领（querySelectorAll和querySelectorAll）来获取元素节点，这两个要领都接管选择符作为本身的参数。Nicholas在他的《High Performance JavaScript》一书中对这两个要领作了扼要先容，并对其机能作了较量，与传统获取元素节点的要领对比，其机能明明偏优。让我们从下面这个例子提及。

<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行表格中，要获取每行包括后果的单位格，传统意义上，我们行使以下的要领：

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提供的新要领，仅一行代码即可完成使命，并且速率很快。

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

我们可以行使《javascript计划模式》一书中提供的一个“要领机能说明器”来较量这两个要领的机能，要领如下：

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);
  }
};

然后将这两个要领写入一个工具之中，并用机能说明器对它们举办较量.

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();

查察示例，我们很清晰的看到，新的要领不只行使简朴，并且机能明明优于我们传统的要领。留意，尽量IE8已经支持这些要领，可是IE8并不支持nth-of-type()选择器(详情可参考Compatibility table: CSS3 Selectors)，以是在IE8中会抛堕落误信息。

当挪用document.querySelectorAll（）要领时，将返回节点数种的第一个元素节点，假如没有匹配的节点，将返回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，挪用以下要领将返回id属性为foo的元素。

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

假如去掉id属性为foo的元素，挪用上面的要领将返回：bar。该要领凭证参数中转达的选择符举办查找，假如找到则终止并返回该元素，不然返回null。

挪用document.querySelectorAll（）要领将按次序返回包括在节点树中全部匹配的元素，如：

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

上面的res中将选泽文档中class为“error”或“warning”的全部p元素。

尽量这两个要领简朴易用，并且机能较高，可是也只有有限的赏识器支持这些要领，如IE8、FF3.5、Safari3.1、chrome1、opera10。我们可以在一些应用措施中按如下的要领试着行使它们：

if(document. querySelector){
	var res = document.querySelectorAll("p.warning, p.error");
}else{
	//传统的要领;
}

本文只是对这两个要领作一个扼要的切磋，详情可以相识w3c相识更多。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!