软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > document.querySelector()和document.querySelectorAll()方

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了解更多。

    相关阅读
    栏目导航
    推荐软件