Converter strings em nós DOM

Não faz muito tempo que os navegadores estavam estagnados quando se tratava de implementar novas APIs e recursos, o que levou ao surgimento do MooTools (FTW), jQuery, Dojo Toolkit, Prototype e outros kits de ferramentas JavaScript. Em seguida, começamos a fazer mais renderização no lado do cliente e fomos forçados a usar uma variedade de truques para lidar com modelos, incluindo strings HTML massivas em nosso JavaScript e até mesmo abusando do <script> para manter nossos modelos.

É claro que, depois de colocar o conteúdo no modelo, você precisa transformar essa string em nós DOM, e esse processo tem alguns truques próprios, como a criação de um <div>fora da tela, definindo seu innerHTML para o valor da string, pegando o firstChilde movendo o nó para o nó desejado. Cada kit de ferramentas JavaScript usaria sua própria estratégia para converter a cadeia de caracteres em DOM, destacando a necessidade de um método padrão para realizar essa tarefa.

Hoje, há uma maneira pouco conhecida (mas padrão) de converter string em DOM com JavaScript: ContextualFragment.

Eu falei sobre DocumentFragment para criar
e armazenar nós DOM para desempenho no passado, mas essa postagem ilustrou a criação de elementos via
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 


  To create DOM nodes from a string of HTML we'll use 
  document.createRange().createContextualFragment:


let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/






DocumentFragment  compartilham a maioria dos métodos que os NodeList objetos


têm, portanto, o senhor pode usar métodos típicos do DOM, como querySelector e querySelectorAll


bem como propriedades de travessia do DOM, como firstChild com o resultado DocumentFragment:





let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');






Quando estiver pronto para injetar todos os nós DOM criados, o senhor pode simplesmente executar:





// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);






O senhor também pode injetar nós um de cada vez:


placementNode.appendChild(frag.firstChild);






O document.createRange().createContextualFragment é um método incrível e sensato para converter strings em nós DOM no JavaScript.  Abandone seus antigos shims e mude para essa API simples e de alto desempenho!











A postagem original: DOMParser




Hoje, temos uma maneira padrão de converter string em DOM com JavaScript:  DOMParser.


O JavaScript


Tudo o que o senhor precisa fazer é criar um DOMParser e usar sua instância parseFromString method:


let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');


Returned é um document contendo os nós gerados a partir de sua string.  Com isso document o senhor pode usar os métodos padrão de passagem de nós para recuperar os nós que especificamos em nossa string:


let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
let div = doc.body.firstChild;

let divs = doc.body.querySelectorAll('div');


O senhor não precisa de um único elemento de envolvimento como os componentes JSX: pode ter elementos irmãos:


let doc = new DOMParser().parseFromString('<div>1</div><div>2</div>', 'text/html');
let firstDiv = doc.body.firstChild;
let secondDiv = firstDiv.nextSibling;


Aqui está uma função simples de empacotamento para DOMParser para recuperar os nós:


let getNodes = str => new DOMParser().parseFromString(str, 'text/html').body.childNodes;

let nodes = getNodes('<div>1</div><div>2</div>');

// [div, div] 


O DOMParser é um método incrível e sensato para converter strings em nós DOM no JavaScript.  Abandone seus antigos shims e mude para essa API simples e eficiente!