どのような種類のオブジェクトが[オブジェクトテキスト]としてコンソールに表示されますか？私はjQueryを使ってその内容を取得します、JavaScriptコンソールで</p> <pre><code><p id="thingy">Here is some <em>emphasized</em> text!</p> </code></pre> <p>：

Question

は、私は次の要素を持っていると言う

：

> 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オブジェクトです。 I出力ちょうど最初の要素、私の推測を確認しているように思われる場合：

> theContents[0] 
"Here is some " 

私は別の文字列でそれを連結しようとする場合は、私はいくつかの理解を欠いていていることがわかり：

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

その変数は文字列のように見えますが、実際には何らかのオブジェクトです。そのため、真ん中のjQueryオブジェクトは通常のオブジェクトとして表示されません。生のマークアップとして表示されます。

Another questionも同じ問題を参照していますが、実際には説明しません。私は実際の問題を解決するためにcontents[0].textContentを使用することができますが、それでも私はここで何が起こっているのかを正確に理解する助けにはなりません。誰かが私に詳細を説明することはできますか？

Answer 1

ほとんどのjQuery関数は便宜上ほとんどの目的のために配列のように見え、動作するjQuery objectを返します。ドキュメンテーションを引用するために、「jQueryオブジェクトにはDOM（Document Object Model）要素の集合」（または「ノード」）が含まれています。したがって、コレクションの各メンバーは文字列ではなくDOMノードであるとみなすことができ、したがって、あなたが見ているオブジェクトはText nodeです。

JavaScriptで文字列連結を実行すると、文字列でない各オペランドは、toString()メソッドを呼び出すことによって自動的に1に変換されます。したがって、 "1,2,3"は配列[1, 2, 3]の文字列表現であり、 "[object HTMLDivElement]"はHTML "<div>"で作成されたノードを表し、 "[object Text]"はテキストノードを表します。

read the specification hereとすることができます。 interface 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 " 

Answer 2

DOMにはさまざまな種類のノードがあります。要素ノードは、属性ノード、テキストノードなど

あなた<p>タグのDOM構造は、実際にjQueryのより良い要素の操作を可能にするために、ページのDOM構造を保持よりも、もう少し多くのような

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

そのように見えます