使用jQuery遍历HTML的DOM

Question

我希望使用jQuery遍历html页面的DOM结构中的所有元素。基本上只需要body标签内的元素。

我想这样做的原因是我想获取body结构中每个元素的位置。

我搜索了一下，但没有找到答案。

非常感谢您的帮助。

- user563892

Answer 1

$('body *').each(function() {
    // do stuff
});

如果你有内联的<script>标签等，你可以添加一个:not选择器来排除它们：

$('body *:not(script, style, noscript)').each(function() {
    // do stuff
});

正如评论和jQueryall选择器文档中指出的那样，这种方法可能性能不佳。虽然我没有进行任何经验测试，但以下方法可能性能更好：

$('body').find('*').not('script, style, noscript').each(...);

- roryf

---

这两个选择器在旧浏览器（如IE7及以下版本）中的性能都很差。对于后一个选择器，最好在each回调函数内执行检查。 - Andy E

如果我这样做，在// do stuff部分放置alert($(this).name)，我得到的答案是undefined。它似乎循环遍历了我的body中的所有元素。我只需要弄清楚如何正确访问它们。 - user563892

@Punxdelirium 在函数内部，this 指向 DOM 元素，因此您可以使用 this.name。将其包装在 $(this) 中将其转换为一个 jQuery 对象，该对象没有 name 属性。 - roryf

@Punxdelirium：你应该使用this.tagName来获取标签名称。this.name会指向某些元素上存在的name属性，比如<a>和<input>，但并不适用于所有元素。 - Andy E

Answer 2

最佳表现的解决方案是使用 getElementsByTagName 而不是 jQuery 选择器：

$(document.body.getElementsByTagName("*")).each(function () {
     // Do something here
});

在选择器中与任何东西结合使用*通常不是一个好主意，正如jQuery文档本身所指出的:

警告：除了单独使用之外，所有或通用选择器非常缓慢。

http://api.jquery.com/all-selector/

如果你真的想要，你可以使用以下任何一种变体，尽管它们都不会给你像getElementsByTagName那样好的性能：

$(document.body).find("*");
$("body").find("*");
$("*", document.body);

- Andy E

Answer 3

使用全部选择器：

$("body *").each(...)

- JB Nizet