mootools：使用 css 类遍历 DOM 时的性能如何

Question

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

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

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

Answer 1

取决于浏览器和 mootools 版本。

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

我在采访 mootools-core 和 Slick 团队的 Fabio Miranda Costa（针对 v1.3）时问了一个类似的问题，您可以在此处阅读他的回复（底部！）：http://fragged.org/intermoos-part-6-fabio-miranda-costa-gets-slick_1213.html

为了节省您的点击，现在使用 slick 的更好做法是：

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

他的回答是：

第一个例子：

• 如果浏览器有 querySelectorAll 方法，Slick 引擎会检测到它并正确使用它 快跑，快如闪电
• 如果浏览器没有它，简而言之——它会做 document.getElementById('someid').getElementsByTagName('div') 并且对于每个找到的节点，它 将检查是否存在 类“某事”。

第二个例子：

• 对于每个浏览器，它都会抓取 id 为“someid”的元素；
• 那么，如果浏览器有querySelectorAll，它将使用这个 获取所有 div 的方法 来自“someid”的“something”类 上下文；
• 如果浏览器没有它，将使用 getElementsByTagName('div') 来自“someid”上下文的方法和 对于每个找到的节点，它将 检查类的存在 “某事”。

所以，正如所见，第一个会更快 对于大多数浏览器，并且是 受到推崇的。从此 采访 Firefox、Safari、Chrome、 Opera 和 IE >= 8，有 querySelectorAll 函数。