什麼樣的對象在控制檯中顯示爲[object Text]？

說我有以下元素：什麼樣的對象在控制檯中顯示爲[object Text]？

<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來解決我真正的問題，但這仍然不能幫助我理解到底發生了什麼。有人可以向我詳細解釋爲什麼所有這些行爲都是這樣嗎？

來源

2012-04-02 75th Trombone

大多數jQuery函數返回一個jQuery object，爲方便起見外觀和工作方式對於大多數用途的陣列。引用文檔「一個jQuery對象包含文檔對象模型（DOM）元素」（或「節點」）的集合。因此，您可以假設集合中的每個成員都是DOM節點，而不是字符串，因此您正在查看的對象是Text node。

在JavaScript中，當你做字符串連接每個操作數是通過調用其toString()方法不是一個字符串被自動轉換爲一個。因此，正如「1,2,3」是數組[1, 2, 3]的字符串表示，「[object HTMLDivElement]」表示使用HTML「<div>」創建的節點，「[object Text]」表示Text節點。

你可以read the specification here。由於接口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 "

來源

2012-04-02 15:34:30

+1：快速示範：http://jsfiddle.net/fwysq/2/ – 2012-04-02 15:36:41

在DOM中有各種不同類型的節點。元素節點，屬性節點，文本節點等

你<p>標籤DOM結構實際上更像

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

它多一點的jQuery保留從頁面的DOM結構，以更好地允許元素操縱

來源

2012-04-02 15:41:31

什麼樣的對象在控制檯中顯示爲[object Text]？

回答

相關問題