澄清jQuery DOM Traversal

Question

当他们说DOM遍历时，我不确定我是否完全理解这里的jQuery文档。它真的意味着遍历包装器对象中的DOM副本吗？在我看来，实际遍历是在选择元素时完成的，而使用像.get（）和.next（）这样的方法实际上是遍历DOM的副本。我是对的，还是我错过了什么？

提前致谢！

Answer 1

jQuery函数返回一个对象。它具有数值属性，其值为引用到DOM元素，而不是副本。所以给出以下内容：

<p id="p0">p0</p>
<p id="p1">p1</p>

<script>
var paragraphs = $('p');
</script>

段落将是一个具有'0'属性的对象，其值是对id为p0的p元素的引用，以及对id为p1的p元素的引用的'1'属性。您可以使用以下方式引用第一个p：

paragraphs['0'];

jQuery帮助“遍历DOM”，因为您可以使用选择器（或多个选择器）将元素“收集”为对象的属性，然后迭代该对象的数字属性并对它们执行某些操作。所以要在上面的p元素中添加一个类，你可以这样做：

paragraphs.each(function(i,el){$(el).addClass('newClass')})

普通javascript中的等价物是：

var paragraphs = document.getElementsByTagName('p');
var i = paragraphs.length;
while (i--) {
    myLib.addClass(paragraphs[i], 'newClass');
}

其中myLib.addClass是一个向className属性添加类的简单函数。如果addClass函数更聪明一些，那么它可以接受元素引用的数组（或类数组对象），那么POJS版本将是：

myLib.addClass(document.getElementsByTagName('p'), 'newClass');

因此，构建等效的 ad hoc “DOM遍历”功能并不是特别困难。