Em muitos posts leio que em javascript manipula elemento dom, também citados como "nodes"
Como é o processo de manipulação desses nodes ?
Qual é a estrutura envolvida? Qual formato? Estilo xml? em tree?
O DOM (Document Object Model, ou modelo do objeto "documento") é na verdade uma API à parte, presente nos browsers, mas que não faz parte da linguagem JavaScript em si.
A estrutura é muito simples, é uma árvore, e cada elemento é um nó (node) dessa árvore.
Tome o seguinte HTML como exemplo:
<body>
<div>
<a href="http://example.com">Link</a>
</div>
</body>
A árvore que representa esse DOM seria assim
document
- body
- elemento <div>
- elemento <a>
- texto "Link"
Existem vários tipos de nó no DOM: nós de elementos (como div
e a
), nós de texto (dentro de algum outro elemento), nós de comentário, nós que representam atributos de elementos, entre outros.
Na API, cada nó do DOM é representado como um objeto, com diversas propriedades e métodos. Entre as principais, eu destacaria firstChild
(primeiro nó filho de um elemento) e nextSibling
(próximo nó no mesmo nível do elemento), pois apenas com elas é possível atravessar toda a árvore utilizando uma função recursiva estilo depth-first:
function traverse(el) {
if(el.firstChild) traverse(el.firstChild);
while(el) {
console.log(el.nodeName, el.nodeType, el.textContent);
el = el.nextSibling
}
}
window.onload = function() {
traverse(document.body);
}
<div>
<a href="http://example.com">Link</a>
</div>
#text
é a forma como o console representa esse objeto.
Commented
20/05/2015 às 17:51