Che tipo di oggetto appare nella console come [oggetto testo]?

Question

Dire che ho il seguente elemento:

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

In una console Javascript, vado a prendere il suo contenuto con jQuery:

> var theContents = $('<p id="thingy">Here is some <em>emphasized</em> text!</p>').contents(); 

theContents è ora una matrice che assomiglia a questo:

> theContents 
["Here is some ", <em>​emphasized​</em>​, " text!"] 

Fin qui tutto bene; sembra essere un array, dove elementi 0 e 2 sono stringhe, ed elemento 1 è un oggetto jQuery. Se io in uscita solo il primo elemento, sembra confermare la mia ipotesi:

> theContents[0] 
"Here is some " 

Tuttavia, se provo per concatenare con un'altra stringa, vedo che mi manca un po 'di comprensione:

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

Quindi quella variabile sembra una stringa, ma in realtà è una specie di oggetto. Del resto, l'oggetto jQuery nel mezzo non appare come un oggetto regolare, neanche; si presenta come il grezzo markup.

Another question fa riferimento lo stesso problema, ma in realtà non lo spiegano. Ho scoperto che posso usare contents[0].textContent per risolvere il mio vero problema, ma che ancora non mi aiuta a capire esattamente cosa sta succedendo qui. Qualcuno può spiegarmi in dettaglio perché tutto questo si sta comportando così com'è?

Answer 1

maggior parte delle funzioni jQuery restituiscono un jQuery object, che per comodità si presenta e funziona come una matrice per la maggior parte degli scopi. Per citare la documentazione, "Un oggetto jQuery contiene una raccolta di elementi DOM (Document Object Model)" (o "nodi"). Quindi puoi assumere che ogni membro della collezione sia un nodo DOM, non una stringa, e di conseguenza l'oggetto che stai guardando è un Text node.

In JavaScript quando si esegue una concatenazione di stringhe ogni operando che non è una stringa viene automaticamente convertito in uno chiamando il suo metodo toString(). Quindi, proprio come "1,2,3" rappresenta la stringa dell'array [1, 2, 3] e "[object HTMLDivElement]" rappresenta un nodo creato con l'HTML "<div>", "[object Text]" rappresenta un nodo di testo.

È possibile read the specification here. Poiché l'interfaccia Testo eredita da CharacterData, ha una proprietà data che contiene la stringa stessa. E così:

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

Nel DOM ci sono vari tipi di nodi. Elemento nodi, Attributo nodi, nodi di testo ecc

tuo <p> tag struttura DOM guarda in realtà più simile

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

sua poco più di jQuery mantenendo la struttura DOM dalla pagina al fine di consentire una migliore manipolazione degli elementi