Chúng tôi đang tìm cách tạo tài liệu DOM DOM bằng javascript từ một chuỗi nhưng không sử dụng Jquery. Có cách nào để làm như vậy không? [Tôi sẽ giả định như vậy, vì Jquery có thể làm điều đó!]Tạo tài liệu DOM từ chuỗi, không có JQuery
Đối với những người tò mò, chúng tôi không thể sử dụng Jquery, bởi vì chúng tôi đang thực hiện điều này trong bối cảnh tập lệnh nội dung của ứng dụng Chrome và sử dụng Jquery kịch bản nội dung của chúng tôi quá nặng.
Trong trường hợp bạn vẫn đang tìm kiếm một anwer, và cho bất cứ ai khác vượt qua nó, tôi chỉ đã cố gắng để làm điều tương tự bản thân mình. Có vẻ như bạn muốn được nhìn DOMImplementation javascript của:
http://reference.sitepoint.com/javascript/DOMImplementation
Có rất ít tài liệu tham khảo có tương thích cũng ở đây, nhưng nó khá tốt hỗ trợ. Về bản chất, để tạo một tài liệu mới để thao tác, bạn muốn tạo một đối tượng Doctype mới (nếu bạn định xuất một số công cụ dựa trên các tiêu chuẩn) và sau đó tạo Tài liệu mới bằng biến Doctype mới được tạo ra.
Có nhiều tùy chọn để được đưa vào cả loại tài liệu và tài liệu, nhưng nếu bạn đang tạo tài liệu HTML5, có vẻ như bạn muốn để lại hầu hết chúng dưới dạng các chuỗi trống.
Ví dụ (New HTML5 DOM Document):
var doctype = document.implementation.createDocumentType('html', '', '');
var dom = document.implementation.createDocument('', 'html', doctype);
Các tài liệu mới bây giờ trông như thế này:
<!DOCTYPE html>
<html>
</html>
Ví dụ (New XHTML DOM Document):
var doctype = document.implementation.createDocumentType(
'html',
'-//W3C//DTD XHTML 1.0 Strict//EN',
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'
);
var dom = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
doctype
);
Vì vậy, tùy thuộc vào bạn để cư trú phần còn lại của nó. Bạn có thể làm điều này một cách đơn giản như thay đổi
dom.documentElement.innerHTML = '<head></head><body></body>';
Hoặc đi với chặt chẽ hơn:
var head = dom.createElement('head');
var body = dom.createElement('body');
dom.documentElement.appendChild(head);
dom.documentElement.appendChild(body);
Tất cả các bạn.
var dom = '<html><head>....</head><body>...</body></html>';
document.write(dom);
document.close();
Sẽ không này ghi đè lên các nội dung hiện tại của tài liệu? –
Đó không phải là vấn đề? Có lẽ tôi đã hiểu nhầm – Manatok
Không, tôi chỉ muốn có thể tạo một tài liệu mới và thực hiện các thao tác trên đó, nhưng chắc chắn không loại bỏ tài liệu trước đó: ( –
HTML sẽ như thế này:
<html>
<head></head>
<body>
<div id="toolbar_wrapper"></div>
</body>
</html>
JS sẽ trông như thế này:
var data = '<div class="toolbar">'+
'<button type="button" class="new">New</button>'+
'<button type="button" class="upload">Upload</button>'+
'<button type="button" class="undo disabled">Undo</button>'+
'<button type="button" class="redo disabled">Redo</button>'+
'<button type="button" class="save disabled">Save</button>'+
'</div>';
document.getElementById("toolbar_wrapper").innerHTML = data;
createDocumentFragment có thể giúp bạn.
https://developer.mozilla.org/En/DOM/DocumentFragment
trình duyệt luôn tạo tài liệu tự với trang trống (about: blank). Có thể, trong ứng dụng Chrome có một số chức năng có sẵn (như XUL trong FF), nhưng không có chức năng như vậy trong javascript bình thường.
Vì vậy, dường như prmising, nhưng không may, DocumentFragment không thể được điền từ một chuỗi , mà sẽ không phù hợp với những gì tôi cần: ( –
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");
(kết quả doc biến là một Object documentFragment).
Tôi đã thử một số cách khác ở đây nhưng có vấn đề khi tạo yếu tố tập lệnh như Chrome từ chối tải tệp .js thực tế được chỉ định bởi thuộc tính src. Dưới đây là những gì làm việc tốt nhất cho tôi.
Tốc độ nhanh hơn gấp 3 lần so với jQuery và 3.5x so với sử dụng DOMParser, nhưng chậm hơn 2x so với việc tạo phần tử theo chương trình.
https://www.measurethat.net/Benchmarks/Show/2149/0
Object.defineProperty(HTMLElement, 'From', {
enumerable: false,
value: (function (document) {
//https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed
var rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g;
return function CreateElementFromHTML(html) {
html = html.trim();
var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<');
var elemStart = html.substr(0, bodystart);
var innerHTML = html.substr(bodystart, bodyend - bodystart);
rgx.lastIndex = 0;
var elem = document.createElement(rgx.exec(elemStart)[4]);
var match; while ((match = rgx.exec(elemStart))) {
if (match[1] === undefined) {
elem.setAttribute(match[4], "");
} else {
elem.setAttribute(match[1], match[3]);
}
}
elem.innerHTML = innerHTML;
return elem;
};
}(window.document))
});
Cách sử dụng Ví dụ:
HTMLElement.From(`<div id='elem with quotes' title='Here is "double quotes" in single quotes' data-alt="Here is 'single quotes' in double quotes"><span /></div>`);
HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async href="https://localhost/.js/sites/reddit/zinject.reddit.css">`);
HTMLElement.From(`<script id="reddit_js" type="text/javascript" async defer src="https://localhost/.js/sites/reddit/zinject.reddit.js"></script>`);
HTMLElement.From(`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`);
HTMLElement.From(`<div id='Sidebar' class='sidebar' display=""><div class='sb-handle'></div><div class='sb-track'></div></div>`);
Sau nhiều giờ JS + Adobe AIR ăn '
' thẻ với 'document.implementation.createHTMLDocument', điều này đã khắc phục được sự cố của tôi! Cảm ơn rất nhiều !! –Tôi có document.body nhưng với createHTMLDocument không có thẻ head. :( – holden321