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

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

另一个问题引用了同样的问题,但实际上没有解释它.我发现我可以contents[0].textContent用来解决我的真正问题,但这仍然无法帮助我理解这里到底发生了什么.有人可以向我详细解释为什么这一切都是这样的吗？

Answer 1

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

在JavaScript中,当您进行字符串连接时,每个不是字符串的操作数会通过调用其toString()方法自动转换为一个.因此,正如" 1,2,3"是数组的字符串表示形式,[1, 2, 3]" [object HTMLDivElement]"表示使用HTML" <div>" 创建的节点," [object 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 "