Můj původní příspěvek obsahoval DOMParser
, JavaScript API pro převod řetězců HTML do uzlů DOM. Zatímco DOMParser
funguje ve většině případů dobře, toto rozhraní API má určité okraje a není tak výkonné jako jiné rozhraní API:ContextualFragment
. Přepsal jsem tento příspěvek, abych zdůraznil ContextualFragment
, ale pokud se stále chcete dozvědět o DOMParser
, podívejte se prosím na původní text na konci tohoto příspěvku.
Není to tak dávno, co prohlížeče většinou stagnovaly, pokud jde o implementaci nových API a funkcí, což vedlo k vzestupu MooTools (FTW), jQuery, Dojo Toolkit, Prototype a podobně JavaScript Toolkit. Poté jsme začali více vykreslovat na straně klienta a byli jsme nuceni používat různé triky pro práci se šablonami, včetně masivních řetězců HTML v našem JavaScriptu a dokonce zneužívání <script>
tagy pro uložení našich šablon.
Samozřejmě poté, co umístíte svůj obsah do šablony, musíte tento řetězec přeměnit na uzly DOM a tento proces měl několik vlastních triků, jako je vytvoření figuríny <div>
mimo obrazovku. , nastavte jeho innerHTML
na hodnotu řetězce a uchopte firstChild
a přesunutí uzlu do požadovaného uzlu. Každá sada nástrojů JavaScriptu by používala svou vlastní strategii pro převod řetězce na DOM, což zdůrazňuje potřebu standardní metody k provedení tohoto úkolu.
Dnes existuje málo známý (ale standardní) způsob převodu řetězce na DOM pomocí JavaScriptu:ContextualFragment
.
Dotkl jsem se DocumentFragment
vytvářet a ukládat uzly DOM pro výkon v minulosti, ale to zveřejňuje ilustrované vytváření prvků prostřednictvím document.createElement
:
// Use a DocumentFragment to store and then mass inject a list of DOM nodes var frag = document.createDocumentFragment(); for(var x = 0; x < 10; x++) { var li = document.createElement("li"); li.innerHTML = "List item " + x; frag.appendChild(li); }
K vytvoření uzlů DOM z řetězce HTML použijeme document.createRange().createContextualFragment
:
let frag = document.createRange().createContextualFragment('OneTwo'); console.log(frag); /* #document-fragment One Two */
DocumentFragment
objekty sdílejí většinu metod, které NodeList
objecthave, takže můžete použít typické metody DOM jako querySelector
a querySelectorAll
stejně jako vlastnosti procházení DOM jako firstChild
s výsledným DocumentFragment
:
let firstChild = frag.firstChild; let firstDiv = frag.querySelector('div'); let allDivs = frag.querySelectorAll('div');
Až budete připraveni vložit všechny vytvořené uzly DOM, můžete jednoduše provést:
// "placementNode" will be the parent of the nodes within the DocumentFragment placementNode.appendChild(frag);
Uzly můžete také aplikovat jeden po druhém:
placementNode.appendChild(frag.firstChild);
document.createRange().createContextualFragment
function je úžasná, rozumná metoda pro převod řetězců na uzly DOM v JavaScriptu. Zahoďte své staré podložky a přejděte na toto výkonné, jednoduché API!