Question

说我有以下元素：

<p id="thingy">Here is some <em>emphasized</em> text!</p>

在Javascript控制台中，我将使用jQuery获取其内容：

> var theContents = $('<p id="thingy">Here is some <em>emphasized</em> text!</p>').contents();

theContents现在是一个如下所示的数组：

> theContents
["Here is some ", <em>emphasized</em>, " text!"]

到目前为止一切顺利;它似乎是一个数组，其中元素0和2是字符串，元素1是一个jQuery对象。如果我只输出第一个元素，它似乎证实了我的猜测：

> theContents[0]
"Here is some "

但是，如果我尝试将其与另一个字符串连接起来，我发现我缺乏一些理解：

> 'Hello! ' + contents[0];
"Hello! [object Text]"

因此变量看起来像一个字符串，但它实际上是某种对象。就此而言，中间的jQuery对象也不会显示为常规对象;它显示为原始标记。

Another question引用了同样的问题，但实际上没有解释它。我发现我可以使用contents[0].textContent来解决我的真正问题，但这仍然无法帮助我理解这里发生了什么。有人可以向我详细解释为什么所有这些都按照它的方式行事吗？

Answer 1

大多数jQuery函数返回一个jQuery object，为了方便起见，它看起来像数组一样用于大多数目的。引用文档，“jQuery对象包含文档对象模型（DOM）元素的集合”（或“节点”）。因此，您可以假设集合的每个成员都是DOM节点，而不是字符串，因此您正在查看的对象是Text node。

在JavaScript中进行字符串连接时，每个不是字符串的操作数会通过调用其toString()方法自动转换为一个。因此，正如“1,2,3”是数组[1, 2, 3]的字符串表示形式而“[object HTMLDivElement]”表示使用HTML“<div>”创建的节点，“{{1 “}表示文本节点。

你可以read the specification here。由于接口Text继承自CharacterData，因此它具有包含字符串本身的data属性。所以：

[object Text]

Answer 2

在DOM中有各种不同类型的节点。元素节点，属性节点，文本节点等。

您的<p>标签DOM结构实际上看起来更像

   Element Node [p]
   ->Text Node [Here is some ]
   ->Element node [em]
     ->Text Node [emphasized]
   ->Text Node [text!]

它只是jQuery保留页面的DOM结构，以便更好地允许操作元素

什么样的对象在控制台中显示为[object Text]？

2 个答案: