2013-08-14 28 views
6

Tôi đang phát xung quanh với một số document fragment. Tôi thấy khó hiểu được cách nó hoạt động khi tôi gắn nó vào DOM.Tôi có thể giữ một tham chiếu đến một đoạn tài liệu không?

Tôi tạo một doc fragment mà tôi gán cho một biến, khi tôi chèn một số nội dung vào nó và chắp thêm đoạn tài liệu vào phần tử. Nhưng nếu tôi xóa số element thì biến của tôi nên tham chiếu đến đoạn tài liệu chứa một đoạn tài liệu trống.

Tôi cố gắng tạo bộ nhớ cache cho thư viện của bên thứ ba tạo các đoạn tài liệu. Vì vậy, tôi muốn làm việc này. Tôi có nên tạo một cloneNode trước khi tôi chắp thêm đoạn mã vào DOM, đúng không?

tôi đã tạo ra một fiddle JS: http://jsfiddle.net/4CTXG/1/

var test = document.createDocumentFragment(); 
//var test = document.createElement("div"); // This one work 

$(test).append($("<div>").html('Hello world!')); 


$("#result").append(test); 

setTimeout(function(){ 
    $("#result").children().remove(); 
    $("#result").append(test); 

    console.log('Now test should have been appended'); 
    $(result).css({"background": "#FF0000"}); 
},5000) 

Trả lời

11

Khi bạn nối thêm Phần tử (ví dụ: <div>) vào DOM, Phần tử được thêm làm con của cha mẹ mới. Con của div không thay đổi. Khi bạn xóa phần tử khỏi phần tử gốc, phần tử chỉ được tách khỏi DOM. Nó bạn vẫn có một tham chiếu đến Element nó sẽ vẫn chứa các con của nó, có sẵn để gắn lại sau này.

Khi bạn chắp thêm một DocumentFragment vào DOM, các con của DocumentFragment được loại bỏ khỏi DocumentFragment và được chuyển thành con của phần tử DOM của nó. DocumentFragment hiện đang trống.

Vì vậy, thay vì bổ sung DocumentFragment, bạn nên chắp một bản sao sâu của đoạn.

Xem http://dom.spec.whatwg.org/#concept-node-insert để biết chi tiết đẫm máu.

+0

Câu trả lời rất hữu ích +1 –

-1

đối tượng Javascript được sao chép bằng cách tham khảo chứ không phải là giá trị. Vì vậy, khi bạn gán phân đoạn cho một biến và sau đó chèn đoạn vào DOM, cả biến và DOM đều tham chiếu cùng một đối tượng. Bất kỳ thay đổi nào bạn thực hiện đối với một cũng sẽ xảy ra trong trường hợp khác.

Nếu bạn thực sự muốn biến tham chiếu một đối tượng khác với DOM, thì nhân bản là cách tiếp cận đúng.

+0

Nhưng tại sao nó lại liên quan đến createElement? Và tại sao nó bị xóa? –

+0

Vì [createDocumentFragment()] (https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment) trả về một đối tượng, trong khi [createElement()] (https: //developer.mozilla .org/en-US/docs/Web/API/document.createElement) trả về một phần tử HTML. –

+0

Ok, cảm ơn. Có thể loại bỏ đoạn tài liệu khỏi DOM mà không xóa nó không? –

Các vấn đề liên quan