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

What kind of object shows up in the console as [object Text]?

本文关键字：object Text 显示 类型 对象 控制台 什么      更新时间：2023-09-26

假设我有以下元素：

<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对象也不会显示为常规对象；它显示为原始标记。

另一个问题引用了同样的问题，但并没有真正解释它。我发现我可以使用contents[0].textContent来解决我的真实问题，但这仍然不能帮助我确切地理解这里发生了什么。有人能向我详细解释一下为什么这一切会如此吗？

大多数jQuery函数都返回一个jQuery对象，为了方便起见，它在大多数情况下看起来和工作起来都像一个数组。引用文档，"jQuery对象包含文档对象模型（DOM）元素的集合"（或"节点"）。因此，您可以假设集合的每个成员都是DOM节点，而不是字符串，因此您要查看的对象是Text节点。

在JavaScript中，当您进行字符串串联时，每个不是字符串的操作数都会通过调用其toString()方法自动转换为一个。因此，正如"1,2,3"是数组[1, 2, 3]的字符串表示，"[object HTMLDivElement]"表示用HTML"<div>"创建的节点一样，"[object Text]"表示Text节点。

您可以在此处阅读规范。由于接口Text继承自CharacterData，因此它具有包含字符串本身的data属性。因此：

var theContents = $( '<p id="thingy">Here is some <em>emphasized</em> text!</p>' )
                    .contents();
console.log( theContents[0].data );
// => "Here is some "
console.log( "Hello! " + theContents[0].data );
// => "Hello! Here is some "

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

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

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

它只不过是jQuery保留了页面中的DOM结构，以便更好地操作元素

相关文章：