Javascript 什么类型的对象在控制台中显示为[对象文本]？

假设我有以下元素：

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

到目前为止还不错；它似乎是一个数组，其中元素

0

和

2

是字符串，元素

1

是jQuery对象。如果我只输出第一个元素，它似乎证实了我的猜测：

> theContents[0]
"Here is some "

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

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

所以这个变量看起来像一个字符串，但实际上它是某种对象。在这方面，中间的jQuery对象也不显示为常规对象；它显示为原始标记

---

引用了相同的问题，但实际上没有解释它。我发现我可以使用

contents[0].textContent

来解决我真正的问题，但这仍然不能帮助我准确地理解这里发生了什么。有人能详细解释一下为什么所有这些都是这样的吗？

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

在JavaScript中，当您进行字符串连接时，通过调用其

toString（）

方法，非字符串的每个操作数将自动转换为一个操作数。因此，正如“

1,2,3

”是数组

[1,2,3]

的字符串表示，“

[object htmldevelment]

”表示用HTML创建的节点“

”，“

[object Text]

”表示文本节点

你可以。由于接口文本继承自CharacterData，因此它有一个包含字符串本身的属性。因此：

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 "

var theContents=$（“
这里是一些强调的文本！
”）
.contents（）；
console.log（内容[0].data）；
//=>“这里有一些”
log（“Hello！”+内容[0]。数据）；
//=>“你好！这里有一些”

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

您的

标记DOM结构实际上看起来更像

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

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

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 "

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