mootools：使用css类行走DOM时的性能如何

Question

我正在尝试编写一个网格类： 以第一个单元格为例，它的class属性为“cell r1 c1”，r1表示第一行，c1表示第一列，然后我用这样的代码控制整行：

gridContainer.getElements('.r1').addClass('selected');

所以我的问题是：是这样做的好习惯吗？

Answer 1

取决于浏览器和mootools版本。

首先，如果您想保留现有代码，请使用.getElements("td.r1") - 对于缺少getElementsByClassName和querySelectorAll的浏览器，更合格的选择器会更好。

我在采访mootools-core和Slick团队的Fabio Miranda Costa时提出了类似的问题（第1.3节），你可以在这里阅读他的回复（底部！）：http://fragged.org/intermoos-part-6-fabio-miranda-costa-gets-slick_1213.html

为了节省你的点击，现在光滑的更好的做法是什么：

// 1
$$("#someid div.something");
// or 2
document.id("someid").getElements("div.something");

他的回答是：

  

在第一个例子中：

     

  
• 如果浏览器具有querySelectorAll方法，则为Slick   引擎会检测到它并正确使用它   走开，闪电般快速
  
• 如果浏览器没有它，简而言之就是这样   的document.getElementById（“someid”）的getElementsByTagName（“DIV”）   并且对于每个找到的节点，它   将检查是否存在   class'sthing'。
  

     

第二个例子：

     

  
• 对于每个浏览器，它将获取id为'someid'的元素;
  
• 然后，如果浏览器有querySelectorAll，它将使用它   用它来获取所有div的方法   来自'someid'的'某事'类   上下文;
  
• 如果浏览器没有它将使用getElementsByTagName（'div'）   来自'someid'上下文的方法   对于每个找到的节点，它将   检查班级是否存在   “东西”。
  

     

所以，正如所见，第一个会更快   对于大多数浏览器而言   推荐的。从此时起   采访Firefox，Safari，Chrome，   Opera和IE＆gt; = 8，有   querySelectorAll函数。