Stiamo cercando modi per creare un documento DOM in javascript da una stringa, ma senza utilizzare Jquery. C'è un modo per farlo? [Direi di sì, dal momento che Jquery può farlo!]Creare un documento DOM da stringa, senza JQuery
Per chi è curioso, non possiamo usare Jquery, perché lo stiamo facendo nel contesto di uno script di contenuto di un'applicazione di Chrome e l'uso di Jquery non farebbe altro che lo script dei contenuti è troppo pesante.
Nel caso tu stia ancora cercando un anwer, e per chiunque altro lo attraversi, ho cercato di fare lo stesso io stesso. Sembra che si desidera essere guardando DOMImplementation di javascript:
http://reference.sitepoint.com/javascript/DOMImplementation
ci sono alcuni riferimenti alla compatibilità pure qui, ma è abbastanza ben supportato.
In sostanza, per creare un nuovo documento da manipolare, si desidera creare un nuovo oggetto Doctype (se si desidera generare alcuni elementi basati su standard) e quindi creare il nuovo documento utilizzando la variabile Doctype appena creata.
Ci sono più opzioni da inserire sia in doctype che nel documento, ma se stai creando un documento HTML5, sembra che tu voglia lasciarne la maggior parte come stringhe vuote.
Esempio (DOM Nuovo documento HTML5):
var doctype = document.implementation.createDocumentType('html', '', '');
var dom = document.implementation.createDocument('', 'html', doctype);
il nuovo documento appare come segue:
<!DOCTYPE html>
<html>
</html>
Esempio (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
);
spetta a te popolare il resto. Si potrebbe fare questo nel modo più semplice cambiare
dom.documentElement.innerHTML = '<head></head><body></body>';
o andare con la più rigorosa:
var head = dom.createElement('head');
var body = dom.createElement('body');
dom.documentElement.appendChild(head);
dom.documentElement.appendChild(body);
tutto tuo.
var dom = '<html><head>....</head><body>...</body></html>';
document.write(dom);
document.close();
non sarà questo ignorare il contenuto corrente del documento? –
Non era questo il punto? Forse ho frainteso – Manatok
No, voglio solo essere in grado di creare un nuovo documento e fare operazioni su di esso, ma certamente non sbarazzarmi di quello precedente :( –
HTML desidera un
<html>
<head></head>
<body>
<div id="toolbar_wrapper"></div>
</body>
</html>
JS sarebbe simile a questa:
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 possono aiutare.
https://developer.mozilla.org/En/DOM/DocumentFragment
browser creano sempre documento da soli con la pagina vuota (about: blank). Forse, nell'applicazione Chrome ci sono alcune funzioni disponibili (come XUL in FF), ma non esiste tale funzione in javascript ordinario.
Quindi sembrava essere pragmatico, ma sfortunatamente, DocumentFragment non può essere popolato da una stringa , che non si adatta a ciò di cui ho bisogno :( –
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");
(la doc variabile risultante è un oggetto frammento di documento).
Ho provato alcuni degli altri modi qui, ma ci sono problemi durante la creazione di elementi di script come Chrome che rifiutano di caricare il file .js effettivo indicato dall'attributo src. Di seguito è ciò che funziona meglio per me.
È fino a 3 volte più veloce di jQuery e 3,5 volte più veloce rispetto all'utilizzo di DOMParser, ma 2 volte più lento rispetto alla creazione di un elemento a livello di programmazione.
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))
});
Esempi di utilizzo:
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>`);
Dopo ore di JS + Adobe AIR mangiare i miei tag '
' con 'document.implementation.createHTMLDocument', questo ha risolto il mio problema! Grazie mille !! –Ho document.body è nullo, ma con createHTMLDocument non c'è un tag head: :( – holden321