0

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?

1 Resposta 1

5

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>

2
  • obrigado pela resposta, em debugger para ver como funciona, eu vejo #text, esse #text é um objeto ou ele é em si uma string?
    – Rod
    Commented 20/05/2015 às 17:43
  • É um objeto, um text node. #text é a forma como o console representa esse objeto.
    – bfavaretto
    Commented 20/05/2015 às 17:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .