Question

我正在阅读jQuery in Action，而第6页则说

$（）函数返回一个包含的特殊JavaScript对象匹配的DOM元素的数组选择器。

通过'特殊'，我认为它意味着它返回一个jQuery对象。但这是我难以理解的句子的最后一部分：“DOM元素的数组”。

问：你能为我写一个返回“DOM元素数组”的函数吗？

示例：$（'p'）将返回所有p标记。因此，如果不从头开始编写jQuery，您能否在JavaScript代码中向我展示，当作者将其称为“DOM元素数组”时，究竟会返回什么？

它只是一个数组，每个元素都包含字符串，如：

<p>foot</p>
<p>bar</p>

我知道Firebug，但我担心Firebug可能正在解释返回的内容并为我代表它。我想我正在努力弄清楚DOM元素究竟是什么。

Answer 1

它并没有真正返回一个数组，而是一个像object这样的数组（jQuery有toArray()来创建一个真正的数组）。

我说数组就像一样，因为它有一个length属性，并且包含带有数字键的匹配元素。

返回的真实对象（仅举几例）......

所有jQuery方法（因此可以在集合上调用它们。）
数字键控元素。
length property。
选择使用。
jQuery版。
等...

Answer 2

尝试console.log(document.getElementsByTagName('p'))并注意它会返回HTML：

[<p>foot</p>, <p>bar</p>]

现在尝试$('p')并注意它返回完全相同的东西。因此，如果存在本机Javascript函数，jQuery将使用它，但如果没有，则它在$()选择器中包含创建类似数组的方法。要访问该数组，如果您想要第一个$('p')[0]标记的解包DOM HTMLElement，则可以使用<p>之类的数组表示法。

不同之处在于$()选择器还包含所有jQuery方法，但是一旦“解包”一个元素，它就会丢失这些方法。因此，为了获得第一个元素，但保留jQuery包装器，你会$('p').eq(0)这样做，你仍然可以使用像$('p').eq(0).css('background-color','#ff0000')这样的方法，而不是写$('p')[0].style.backgroundColor = '#ff0000'

Answer 3

该数组是DOM元素。每个DOM元素本身就是一个对象，具有children / parents / properties / etc.

关于DOM的维基文章的第一句话总结了一下：

The Document Object Model (DOM) is a cross-platform and language-independent convention 
for representing and interacting with objects in HTML, XHTML and XML documents. 
Aspects of the DOM (such as its "Elements") may be addressed and manipulated within 
the syntax of the programming language in use. The public interface of a DOM is 
specified in its application programming interface (API).

http://en.wikipedia.org/wiki/Document_Object_Model

Answer 4

jQuery中的$()函数实际上返回一个jQuery对象。您可以在documentation中详细了解相关信息。 jQuery对象就像一个数组（例如，它有一个length属性），尽管它不是一个数组。 jQuery对象可以是空的，也可以包含一组与选择器匹配的包装DOM元素。 DOM元素是Javascript type。

$（）函数返回一个特殊的JavaScript对象，其中包含与选择器匹配的DOM元素数组

4 个答案: