Jaki obiekt pojawia się w konsoli jako [obiekt tekstowy]?

Question

Say Mam następujący element:

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

w konsoli JavaScript, Przyniosę jej zawartości z jQuery:

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

theContents jest tablicą, która wygląda następująco:

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

Jak dotąd tak dobrze; wydaje się być tablicą, w której elementy są łańcuchami znaków, a element 1 jest obiektem jQuery. Jeżeli wyjście Właśnie pierwszy element, to wydaje się potwierdzać moje przypuszczenia:

> theContents[0] 
"Here is some " 

Jednak gdy próbuję łączyć go z innym ciągiem, widzę, że jestem brakuje pewne zrozumienie:

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

Tak więc zmienna wygląda jak ciąg znaków, ale w rzeczywistości jest to jakiś obiekt. W tym przypadku obiekt jQuery w środku nie pojawia się jako zwykły obiekt; pojawia się jako surowy znacznik.

Another question odnosi się do tego samego problemu, ale tak naprawdę go nie wyjaśnia. Odkryłem, że mogę użyć contents[0].textContent, aby rozwiązać mój prawdziwy problem, ale to nadal nie pomaga mi zrozumieć dokładnie, co się tutaj dzieje. Czy ktoś może wyjaśnić mi szczegółowo, dlaczego wszystko to zachowuje się tak, jak jest?

Answer 1

Większość funkcji jQuery zwraca wartość jQuery object, która dla wygody wygląda i działa jak tablica do większości zastosowań. Aby zacytować dokumentację, "Obiekt jQuery zawiera kolekcję elementów DOM (Document Object Model)" (lub "węzłów"). Można więc założyć, że każdy element kolekcji jest węzłem DOM, a nie ciągiem znaków, a obiekt, na który patrzysz, to Text node.

W JavaScript podczas łączenia ciągów każdy operand, który nie jest ciągiem, jest automatycznie konwertowany na jeden przez wywołanie jego metody toString(). Tak więc, podobnie jak "1,2,3" jest reprezentacją ciągu tablic [1, 2, 3], a "[object HTMLDivElement]" reprezentuje węzeł utworzony za pomocą HTML "<div>", "[object Text]" reprezentuje węzeł Tekst.

Możesz read the specification here. Ponieważ interfejs Text dziedziczy po CharacterData, ma właściwość data, która zawiera sam łańcuch. I tak:

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

W DOM występują różne rodzaje węzłów. Element węzłów Atrybut węzłów węzły tekstowe itp

Twój <p> znaczniki struktury DOM faktycznie wygląda bardziej jak

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

Its trochę więcej niż jQuery zachowując strukturę DOM strony w celu lepszego umożliwiają manipulowanie elementami