Loại đối tượng nào hiển thị trong bảng điều khiển dưới dạng [đối tượng văn bản]?

Question

Nói rằng tôi có các yếu tố sau:

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

Trong một bảng điều khiển Javascript, tôi sẽ nhận được nội dung của nó với jQuery:

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

theContents tại là một mảng trông như thế này:

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

Cho đến nay rất tốt; nó có vẻ là một mảng, trong đó các phần tử 0 và 2 là các chuỗi và phần tử 1 là một đối tượng jQuery. Nếu tôi ra chỉ là yếu tố đầu tiên, có vẻ như để xác nhận tôi đoán:

> theContents[0] 
"Here is some " 

Tuy nhiên, nếu tôi cố gắng nối nó bằng một chuỗi khác, tôi thấy rằng tôi đang thiếu một số hiểu biết:

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

Vì vậy, biến đó trông giống như một chuỗi, nhưng thực tế là một số loại đối tượng. Đối với vấn đề đó, đối tượng jQuery ở giữa không hiển thị như một đối tượng thông thường, hoặc là; nó hiển thị dưới dạng đánh dấu thô.

Another question tham chiếu cùng một vấn đề nhưng không thực sự giải thích được. Tôi đã tìm thấy rằng tôi có thể sử dụng contents[0].textContent để giải quyết vấn đề thực sự của tôi, nhưng điều đó vẫn không giúp tôi hiểu chính xác những gì đang xảy ra ở đây. Ai đó có thể giải thích cho tôi chi tiết tại sao tất cả điều này là hành xử theo cách của nó?

Answer 1

Hầu hết các hàm jQuery trả về jQuery object, để thuận tiện cho giao diện và hoạt động như một mảng cho hầu hết các mục đích. Để trích dẫn tài liệu, "Một đối tượng jQuery chứa một tập hợp các phần tử Mô hình đối tượng tài liệu (DOM)" (hoặc "các nút"). Vì vậy, bạn có thể giả định rằng mỗi thành viên của bộ sưu tập là một nút DOM, không phải là một chuỗi và theo đó đối tượng bạn đang xem là một Text node.

Trong JavaScript khi bạn nối chuỗi mỗi toán hạng không phải là chuỗi được tự động chuyển đổi thành một bằng cách gọi phương thức toString() của nó. Vì vậy, giống như "1,2,3" là biểu diễn chuỗi của mảng [1, 2, 3] và "[object HTMLDivElement]" đại diện cho nút được tạo bằng HTML "<div>", "[object Text]" đại diện cho nút Văn bản.

Bạn có thể read the specification here. Vì giao diện Văn bản kế thừa từ CharacterData, nó có thuộc tính data chứa chính chuỗi đó. Và như vậy:

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

Trong DOM có nhiều loại nút khác nhau. Yếu tố Nodes, thuộc tính Nodes, Nút văn bản, vv

<p> thẻ cấu trúc DOM của bạn thực sự trông giống như

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

của nó ít hơn jQuery duy trì cấu trúc DOM từ trang để cho phép thao tác tốt hơn trong những yếu tố