Převést řetězec na uzly DOM

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!

Původní příspěvek:DOMParser