Esta apostila tem o objetivo de apresentar os conceitos fundamentais do padrão DOM que é utilizado por várias linguagem de programação, em especial pela linguagem JavaScript junto com a linguagem de marcação HTML.
Após o estudo aqui apresentado, será bem mais fácil acessar outros sites e fontes de pesquisa.

Utilize o menu de navegação acima para ir ao ítens diretamente.
1. Modelo de Objetos do Documento (DOM)

O Consórcio World Wide Web busca atingir sua missão aglutinando diversas partes interessadas para juntos, num processo eficaz e consensual, desenvolver padrões de alta qualidade e com base nas contribuições dos seus filiados, da equipe de especialistas do W3C, e da comunidade em geral.
Desenvolve protocolos e diretrizes que  permite aos computadores na Web a comunicação e trocar de informações, documentos, arquivos, etc. Para maiores informações sobre o W3C Brasil acesse o endereço no site, http://www.w3c.br/Home/WebHome.

O Modelo de Objetos do Documento (DOM) foi criado pelo W3C, é uma multi-plataforma que representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador que você usa. É a interface entre a linguagem Javascript e os objetos do HTML.
O JavaScript utiliza os métodos padrãoes  para construção de aplicações ricas e são amplamente conhecido e utilizado.
O Modelo de Objetos do Documento nos fornece a representação estrutural de documentos HTML e XML, definindo a forma como a estrutura pode ser acessada por programas e scripts, possibilitando-nos a modificação na estrutura do documento, do estilo e do conteúdo. Esta apostila utiliza a linguagem JavaScript para tal fim. A representação do documento ocorre através de uma árvore de nós (tree of node) em que cada objeto possui sua propriedade e método.



 
O objeto document é responsável por conceder ao código Javascript todo o acesso a árvore DOM do navegador Web. Portanto, qualquer coisa criado pelo navegador Web no modelo da página Web poderá ser acessado através do objeto Javascript document.


A tabela abaixo mostra algumas propriedades que podem ser utilizadas com o objeto document:
Propriedade Descrição
documentElement Captura o elemento raiz <html> de um documento HTML.
getElementById Busca um elemento da página Web com o uso do atributo id do elemento.
createElement Cria um node elemento na página.
createAttribute Cria um node atributo na página.
createTextNode Cria um node texto na página.
getElementsByTagName Retorna um array dos elementos com o mesmo nome.
appendChild Insere um novo elemento filho.
removeChild Remove um elemento filho.
parentNode Retorna o node pai de um node.


Exemplo 1.1:

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Document</title>
    </head>
    <body>
        <h1>An HTML Docuemnt</h1>
        <p>This is a <i>simple</i> document</p>
    </body>
</html>

  O código acima corresponde a seguinte árvore DOM:



Document Object Model ou DOM, é a API fundamental para representar e manipular o conteúdo de documentos HTML e XML,
o navegador interpreta o código HTML e XML com facilidade porque tais linguagem seguem o padrão DOM.
O código HTML é escrito como uma hierarquia de elementos aninhados, marcados com tags de iní­cio e fim, assim o DOM cria um objeto diferente para cada elemento, mas vincula cada objeto de elemento ao seu elemento circundante (ou elemento pai). Isso cria uma relação pai-filho (parent-children) explí­cita entre os elementos e torna mais imediata a visualizaçao do DOM como uma estrutura em árvore.
O XML diferencia maiúsculas e minúsculas (case-sensitive) e os atributos devem ser colocados entre aspas ou apóstrofos.
O HTML não faz diferença entre maiúsculas e minúsculas (NÃO são case sensitive). Então a notaçao <title> é equivalente a <TITLE> ou <TiTlE>.

DOM e JavaScript
Diferentemente do JavaScript, o DOM não é uma linguagem de programação. O DOM define os objetos e as propriedades de todos os elementos de um documento, assim como os métodos (interface) para acessá-los e o JavaScript pode ser usado para manipulá-los.

O DOM foi desenvolvido para ser independente de qualquer linguagem de programaçao, isto é importante porque diversas linguagens o utilizam para ter acesso a determinado documento. Nesta apostila é utilizado o JavaScript para tal finalidade.
JavaScript e DOM são case-sensitive.

2. Métodos
2.1. Método getElementById

Provavelmente o método mais utilizado no DOM seja o getElementById. Sua função simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento não exista ou o ID informado seja incorreto ele retornará null.
É importante lembrarmos que somente um objeto pode conter um ID específico, ou seja, não podem existir dois objetos em uma página com o mesmo valor de um atributo ID.
Considere o seguinte campo de um formulário:
<input type="text" id="nomeContato" name="nomeContato" ...

Para acessarmos o valor digitado nesse campo de texto em JavaScript procederemos assim:
document.nomeForm.nomeContato.value

Ou seja, precisamos declarar document mais o nome do formulário em que o campo se localizada e o nome do campo espeficado no atributo name.

Se utilizarmos o método getElementById, podemos acessá-lo assim:
document.getElementById('nomeContato').value

Assim, ao invés de informarmos toda a localização do objeto, dizemos apenas o seu atributo ID ao método getElementById.

Detalhe importante: getElementById é diferente de getelementbyid ou getElementbyId. Caso você escreva o nome errado será retornado um erro. Por exemplo: document.getelementByid não é uma função. Lembre que JavaScript e DOM são case-sensitive.

Exemplo 1.2:
Este exemplo mostra o uso do método getElementById() para tratamento do formulário para depois enviá-lo via email.

Vamos supor que eu quero fazer alguma verificação do formulário antes de enviá-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Não será tratado nesse exemplo como enviar email com formulário HTML, apenas validação de campo.
Código:

<html>
<head>
    <title>Exemplo de getElementById() no Formulário</title>
<style type="text/css">
#msg_erro {
    color: red;
    font-weight: bold;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function teste_submit()
{
    var obj_form = document.getElementById('form_teste');
    var obj_nome = document.getElementById('nome_teste');
    var obj_cargo = document.getElementById('cargo_teste');
    var obj_msg_erro = document.getElementById('msg_erro');
    var msg_erro = ''; //duas aspas simples

    if(obj_nome.value == '')
        msg_erro = 'campo NOME vazio';
    else if(obj_cargo.value == '')
        msg_erro = 'campo CARGO vazio';

    if(msg_erro == '')
        obj_form.submit();
    else
        obj_msg_erro.innerHTML = msg_erro;
}
</script>
<form id="form_teste" action="http://www.comocriarsites.com" method="post">
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR>
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR>
<input type="Button" value="Enviar" onclick="teste_submit();">
</form>
<div id="msg_erro"><br></div>
</body>
</html>

Implementação (não está configurado para enviar email):

Nome:
Cargo:

Explicação:

A mesma coisa poderia ser feita com o "onSubmit", porém o objetivo é mostrar o uso do méodo getElementById().
No código acima temos um formulário HTML com dois campos e um botão de enviar, uma tag <div> para mensagem de erro e uma funçao Javascript identificada por teste_submit(). Quando o botão de enviar for pressionado, vai ser chamada a função Javascript teste_submit(). Essa função pega os objetos do formulário, dos campos do fomulário e do <div>, verifica se algum dos campos estão vazio, e se algum deles estiver vazio, ele grava uma string em uma variável local (msg_erro) e depois faz essa string aparecer na tela. Se os dois campos não estiverem vazios, a função submete (envia) o formulário.


Exemplo 1.3:

Este exemplo utiliza links para chamar a função e o foco nos três campos do formulário, cada foco no campo, formata o display dos três campos. O formulário é estruturado em uma tabela de cinco linhas com três colunas (5x3). A terceira coluna de cada tabela possui o sinal < para indicar o foco ativo.


Nesse exemplo usa-se chamanda de Função JavaScript por Meio de Links.
Muitas vezes para chamar uma função em JavaScript numa página HTML através de um clique num objeto (link, imagem, etc), as pessoas usam o evento "onClick" do objeto, colocando, por exemplo:
<a onclick="minhaFuncao();">Clique aqui...</a>

Há um meio mais prático: um link comum! Basta definir "javascript:" e o nome da função, no atributo "href" do link. Um exemplo:
<a href="javascript:minhaFuncao();">Clique aqui...</a>

Algumas funções padrões dos navegadores são chamadas desta forma, se você nunca percebeu:
<a href="javascript:history.back();">Voltar...</a>

Chama o método "back" do objeto "history" do JavaScript. Este objeto, naturalmente, é controlado pelo navegador. Mas você pode usar para funções e objetos próprios. Não se esqueça de colocar "javascript:" em letras minúsculas.

No código abaixo é usado dessa forma:
<a href="javascript:insUser('usuario@user.net')"> usuario@user.net </a> <br />

Exemplo 1.3:
<html>
    <head>
      <title>Teste</title>
      <script language="JavaScript" type="text/javascript">
      <!--

          function f(value)
          {
            document.form.foco.value = value;
            switch (value)
            {
              case "p":
              document.getElementById('s01').style.display = 'block';
              document.getElementById('s02').style.display = 'none';
              document.getElementById('s03').style.display = 'none';
              break;

              case "c":
              document.getElementById('s01').style.display = 'none';
              document.getElementById('s02').style.display = 'block';
              document.getElementById('s03').style.display = 'none';
              break;

              case "o":
              document.getElementById('s01').style.display = 'none';
              document.getElementById('s02').style.display = 'none';
              document.getElementById('s03').style.display = 'block';
              break;
            }
          }

          function insUser(contato)
          {
            sContato = contato.toLowerCase();
            var frm = document.form;
            switch (frm.foco.value)
            {
              case "p":
              if (frm.para.value.length == 0) {
                frm.para.value += contato;
                frm.para.focus(); }
              else if (frm.para.value.length != 0 && frm.para.value.toLowerCase().indexOf(sContato) == -1) {
                frm.para.value += ", " + contato;
                frm.para.focus(); }
              else { frm.para.focus(); }
              break;

              case "c":
              if (frm.cc.value.length == 0) {
                frm.cc.value += contato;
                frm.cc.focus(); }
              else if (frm.cc.value.length != 0 && frm.cc.value.toLowerCase().indexOf(sContato) == -1) {
                frm.cc.value += ", " + contato;
                frm.cc.focus(); }
              else { frm.cc.focus(); }
              break;

              case "o":
              if (frm.cco.value.length == 0) {
                frm.cco.value += contato;
                frm.cco.focus(); }
              else if (frm.cco.value.length != 0 && frm.cco.value.toLowerCase().indexOf(sContato) == -1) {
                frm.cco.value += ", " + contato;
                frm.cco.focus(); }
              else { frm.cco.focus(); }
              break;

              default:
              if (frm.para.value.length == 0) {
                frm.para.focus();
                frm.para.value += contato; }
              else if (frm.para.value.length != 0 && frm.para.value.toLowerCase().indexOf(sContato) == -1) {
                frm.para.value += ", " + contato;
                frm.para.focus(); }
              else { frm.para.focus(); }
              break;
            }
          }

      //-->
      </script>
    </head>

      <body>

        <form name="form">

          <table border="0">
            <tr>
              <td> Para: </td>
              <td> <input type="text" name="para" value="" onFocus="f('p')" /> </td>
              <td> <a id="s01" style="display:none"> < </a> </td>
            </tr>
            <tr>
              <td> Cc: </td>
              <td> <input type="text" name="cc" value="" onFocus="f('c')" /> </td>
              <td> <a id="s02" style="display:none"> < </a> </td>
            </tr>
            <tr>
              <td> Cco: </td>
              <td> <input type="text" name="cco" value="" onFocus="f('o')" /> </td>
              <td> <a id="s03" style="display:none"> < </a> </td>
            </tr>
            <tr style="display:none">
              <td> &nbsp; </td>
              <td> <input type="text" name="foco" value="" READONLY /> </td>
              <td> &nbsp; </td>
            </tr>
            <tr>
              <td> &nbsp; </td>
              <td>
                   <a href="javascript:insUser('usuario@user.net')"> usuario@user.net </a> <br />
                   <a href="javascript:insUser('MainBrain')">  MainBrain  </a> <br />
                   <a href="javascript:insUser('NaoImpoRTAaLetRA')"> NaoImpoRTAaLetRA </a> <br />
                   <a href="javascript:insUser('naoimportaaletra')"> naoimportaaletra </a> <br />
                   <a href="javascript:insUser('Cássio')"> Cássio</a> com acento <br />
                   <a href="javascript:insUser('Cassio')"> Cassio</a> sem acento <br />
              </td>
              <td> &nbsp; </td>
            </tr>
          </table>

          <br />
          <div style="padding-left:38px">
            Valida a existência do usuário nos campos... <br />
            Enquanto o campo estiver focado, será marcado pela seta ou qqer objeto (semelhante a 'Caixa de email do Hotmail')... <br />
            Valida a existencia do usuario nao se importando se está maiusculo ou minisculo... mas é sensivel (diferencia) as letras acentuadas... <br />
          </div>
          
        </form>
      </body>
</html>

Implementação do Código acima:

Para:
Cc:
Cco:
 



























 













  usuario@user.net
MainBrain
NaoImpoRTAaLetRA
naoimportaaletra
Cássio com acento
Cassio sem acento
 


O campo que estiver o foco recebe o conteúdo do link clicado, o conteúdo não pode ser repetido se clicar novamente, não pode haver diferenciação entre letras maiúscular e minúsculas.
Enquanto o campo estiver focado, será marcado pelo sinal <, poderia ser qualquer objeto.


Exemplo 1.4.
Criando tabela zebrada com DOM.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Zebra</title>
<style>
  .zebraon{background:silver}
</style>
<script>
window.onload=function(){
  var zebrar=document.querySelectorAll('.zebra tbody tr')
  for(var i=0;i<zebrar.length;i+=2)
    zebrar[i].className='zebraon'
}
</script>
</head>

<body>
<table class="zebra">
  <thead><tr>
      <th>Vendedor</th> <th>Total</th>
    </tr></thead>
  <tbody><tr>
      <td>Manoel</td>   <td>12.300,00</td>
    </tr><tr>
      <td>Joaquim</td>  <td>21.300,00</td>
    </tr><tr>
      <td>Maria</td>    <td>13.200,00</td>
    </tr><tr>
      <td>Marta</td>    <td>32.100,00</td>
    </tr><tr>
      <td>Antonio</td>  <td>23.100,00</td>
    </tr><tr>
      <td>Pedro</td>    <td>31.200,00</td>
    </tr></tbody>
</table>
</body>
</html>

Exemplo 1.5:
Este exemplo é sobre o método de modelo de objeto de documento, propriedades e eventos para o elemento </video>.

<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<br>
<video id="custom_video_play" width="400" controls="controls">>
<source src="Yes Bank Advertisment.mp4" type="video/mp4"><source src="mov_bbb.flv" type="video/flv"> Browser Not Supporting
</video>
</div>
<script>
var myVideo=document.getElementById("custom_video_play");
function makeBig()
{
myVideo.width=650;
}
function makeSmall()
{
myVideo.width=350;
}
 
function makeNormal()
{
myVideo.width=450;
}
</script>
<div style="text-align:left">
<button onclick="makeBig()">Adjust: Large Screen</button>
<button onclick="makeSmall()">Adjust: Small Screen</button>
<button onclick="makeNormal()">Adjust: Normal Screen</button>
<p></p>
</body>
</html>


Exemplo 1.6:
Como mostrar a largura e altura de uma imagem.

function mostra(){
var altura = document.getElementById("img").height;
var largura = document.getElementById("img").width;
alert("Altura: "+altura+"\nLargura: "+largura);
}
window.onload = mostra;


2.2. Método getElementsByTagName
Ao contrário do método que conhecemos anteriormente, o getElementsByTagName retorna diversos objetos com a tag específicada no método. Portanto, ao invés de informarmos um atributo e termos como retorno um único objeto, informarmos uma tag e temos todas aquelas que constam na página em questão.

Para efeito de teste o código abaixo irá mudar todos os links de uma página, ao acionar o botão o sublinhado mudará para sobrelinhado.
O método getElementsByTagName é capaz de seleciona todas as tags de uma determinada página, ou seja, ele é a solução para selecionarmos todos os links (tag a). Com os links selecionados, basta adicionarmos o estilo desejado.
Exemplo 2.1:

<html>
<head>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
function changeStyleLink() {
var links = document.getElementsByTagName('a');
  for(var x = 0; x < links.length; x++) {
  var _link = links[x];
  _link.style.textDecoration = 'overline';
  }
}
</script>
<p class="p1"><br><a href="#">Link1</a></p>
<p class="p1"><br><a href="#">Link2</a></p>
<botton style="border: 1px solid black;" onclick="changeStyleLink()">Clique aqui!</botton>
</body>
</html>


Link1
Link2
Clique aqui!

Obs:
1) poderia usar <body OnLoad="changeStyleLink()"> para executar a função logo quando a página for iniciada.
2) A variável links armazena todos os links contidos na página através do método getElementsByTagName('a').
3) Iniciamos um loop com o "for" e instanciarmos a variável "x" informando-lhe o valor inicial como sendo igual a 0 (zero). O valor dessa variável satisfaz a relação e é incrementada em 1 (um), na seqüência a variávevel _link armazena o primeiro link, perceba que o JavaScript não é tipado, ou seja, não foi necessário declarar e nem atribuir um tipo para a variável _link.
 Dessa forma, a variável _link, durante o loop, terão os seguintes valores: links[0], links[1].
4) Alguns eventos HTML comum

Evento Descrição
onchange Um elemento HTML foi alterado
onclick O usuário clica em um elemento HTML
onmouseover O usuário passa o mouse sobre um elemento HTML
onmouseout O usuário move o mouse para fora de um elemento HTML
onkeydown O usuário pressiona uma tecla do teclado
onload O navegador terminar o carregamento da página

Elementos que não suportam o evento onclick:
applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style e title.

5) Para finalizar, utlizamos o método style para adicionar aos links o sublinhado desejado. Por fim, dizemos que overline será o valor da propriedade textDecoration porque é esse valor que adiciona o sublinhado superior que desejávamos.

6) Observe que a propriedade text-decoration das CSS é representado por textDecoration no JavaScript, basta retirar o hí­fen e colocar em maiúsculo na primeira letra do segundo nome, é só pesquisar a propriedade em uma tabela CSS e fazer essa alteração para saber qual propriedade existe.

2.3. Método style
O método style tem por objetivo alterar o estilo de um objeto. É algo idêntico ao atributo style do HTML, a diferença é que o estilo ao objeto será acrescido ou alterado via script e não na marcação HTML.
Por exemplo, vamos supor que queremos ocultar um objeto quando esse estiver visível e torná-lo visível novamente quando estiver oculto. Para isso podemos utilizar a propridade display das CSS com o valor none e block respectivamente, em conjunto com o método style.
Exemplo 2.2:

<html>
<head>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
function showHide() {
  var obj = document.getElementById('parag1');
  if(obj.style.display == "") {
  obj.style.display = "none";
  } else {
      obj.style.display = "";
     }
}
<script>
<p  id="parag1">Paragrafo1: <br></p>
<botton style="border: 1px solid black;" onclick="showHide()">Clique aqui!</botton>
</body>
</html>

Paragrafo1:

Clique aqui!

Paragrafo3:

Agora vamos observar o script utilizado:
A função showHide(id) recebe o id do objeto que será o alvo do script. Esse id é atribuido ao método getElementById que, por sua vez, é utilizado na variável obj.
Em seguinda, verificamos se o valor da propriedade display está como padrão (block). Se realmente estiver, a alteramos para o valor none, o que ocultará o objeto. Caso o objeto esteja oculto, ou seja, com o valor none, ele volta para o valor padrão block. Dessa forma, ocultamos e exibimos o objeto como desejado.

2.4. Método className
Semelhante ao método style, o método className tem a função de alterar o estilo de um objeto definido por uma classe CSS.
A vantagem do método className é que podemos alterar as propriedades do estilo na folha de estilo vinculada à página, ou seja, não precisamos alterar o script quando desejarmos alterar o estilo e sim alterar as propriedades da classe CSS.
Exemplo 2.3:
<html>
<head>
<title></title>
<style>
.ocultaObj {
 display: none;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function showHide2() {
 var obj = document.getElementById('parag2');
 if(obj.className == "") {
  obj.className = "ocultaObj";
 } else {
  obj.className = "";
 }
}
</script>
<p id="paragr2">Paragrafo2</p>
<botton style="border: 1px solid black;" onclick="showHide2()">Clique aqui!</botton>
</body>
</html>

Paragrafo2:

Clique aqui!

Paragrafo3:


Observe o script:
function showHide2() {
 var obj = document.getElementById('parag2');
 if(obj.className == "") {
  obj.className = "ocultaObj";
 } else {
  obj.className = "";
 }
}

O script acima tem a mesma característica e função do script apresentado no método style, diferenciando-se apenas pela troca de método, ou seja, ao invés de utilizarmos o método style, utilizamos className.
A classe utilizada (ocultaObj) é tão simples quanto o script. Vejamos:
.ocultaObj {
 display: none;
}
Como dito no início desta unidade, o método className é mais vantajoso do que o style porque nos possibilita alterar o estilo sem alterar o script, ou seja, basta modificarmos as propriedades da classe utilizada.
Assim, suponhamos que ao invés de ocultar e exibir o objeto utilizando a propriedade display, queremos utilizar a propriedade visibility. Para isso iremos alterar o script? Não, simplesmente alteramos a propriedade da classe ocultaObj assim:
.ocultaObj {
 visibility: hidden;
}

2.5. Método innerHTML
Usada para alterarmos ou inserirmos conteúdo ou uma marcação HTML em um objeto, utilizamos o método innerHTML. Obtem-se as Tags no interior de outra, não apenas o texto.
Por exemplo, para a tag <div> com o atributo id="box" pode-se utilizar o método getElementById para acessar o id e o método innerHTML para manipular o conteúdo ou marcação da tag HTML.
inner (ˈɪnər): adj. 1 interno, 2.  íntimo.
inner é um adjetivo em inglês que significa inteno. Então innerHTML quer dizer interno no HTML, ou seja, interno a uma tag.

Vejamos um exemplo de como alterar o conteúdo de uma tag:
var obj = document.getElementById("box");
obj.innerHTML = "Este será o novo conteúdo.";

Vejamos um exemplo de como alterar a marcação HTML de uma tag:
var obj = document.getElementById("box");
obj.innerHTML = "<h1>Esta é a nova marcação HTML desta tag.</h1>";

Utilizando o operador de atribuição += pode-se acrescentar um conteúdo ao conteúdo já existente de uma tag bem como acrescentar  marcação HTM ao conteúdo.

Observe esta marcação HTML:
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</div>

Vamos supor que queremos inserir um título de primeiro nível <h1> acima do parágrafo existente na marcação acima. Para tal procedimento faremos assim:
var obj = document.getElementById("box");
var novaMarcacao = "<h1>Título deste parágrafo.</h1>";
obj.innerHTML = novaMarcacao += obj.innerHTML;

Exemplo 2.4, mostra como adicionar marcação HTML e conteúdo a uma tag:
<html>
<head>
<title></title>
</head>
<body>
   <script type="text/javascript">
 function msg1(){
   document.getElementById('myText').innerHTML = 'Thanks!';
 }
 function msg2(){
   document.getElementById('myText').innerHTML = 'Try message 1 again...';
 }
 </script>
 <input type="button" onclick="msg1()" value="Show Message 1" />
 <input type="button" onclick="msg2()" value="Show Message 2" /><br>
Resultado:
 <p id="myText"></p>
</body>
</html>



Resultado:

.

2.6. innerText
É uma propriedade pertencente apenas a IE (Internet Explorer) e tem a mesma funcionalidade do textContent. Essa propriedade retorna o texto no interior de um container, como uma div, ou outras tags. Caso uma div, por exemplo, possua outras tags em seu interior, o inneText retorna apenas o texto, desprezando os marcadores das tags.
textContent: retorna um conteúdo textual, logo apenas pode-se colocar texto (String).

Exemplos 2.5:
innerText changes only text within HTML tags, e.g.

<div>
  <p>Change Me</p>
</div>

p.innerText = "Changed!"
Becomes
<div>
  <p>Changed!</p>
</div>

Whereas outerText:
<div>
  <p>Change Me</p>
</div>
p.outerText = "Changed!"
Becomes
<div>
   Changed!
</div>


2.7. outerHTML
O atributo outerHTML da estrutura DOM(Document object model) obtem  um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.
Sintaxe
var conteudo = elemento.outerHTML;

Na atribuição, a vaiável conteudo armazena o fragmento de código HTML que descreve o elemento e seus descentes.

A difença básica entre innerHTML e  outerHTML pode ser facilmente entendida com esse exemplo:

<a href="#" onclick="alert(this.innerHTML)">innerHTML</a>
<a href="#" onclick="alert(this.outerHTML)">outerHTML</a>

Clicando no primeiro link, será exibido: innerHTML. Isso porque o alert estará retornando o que o objeto contém, no caso seria o texto do href.

Clicando no segundo link, será exibido: <a href="#" onclick="alert(this.outerHTML)">outerHTML</a>. Ou seja, todo o objeto clicado.

Exemplo 2.6,  usando o innerHTML e o outerHTML:
<script type="text/javascript">
function troca_texto() {
    document.getElementById('conteudo').innerHTML='novo texto';
}
function troca_div() {
    // só IE
    var nova_div = '<div style="border:1px solid #000000;">nova div</div>';
    document.getElementById('conteudo').outerHTML=nova_div;
}
</script>
<div id="conteudo" style="border:1px solid #cccccc;">texto dentro da div</div>
<a href="javascript:troca_texto()">troca texto</a>
<a href="javascript:troca_div()">troca div</a>

2.8. Método appendChild
Ao traduzirmos os nomes que compõe o elemento appendChild.
append (əˈpɛnd): acrescentar, anexar.
child (tʆaɪld): filho, criança.
Após a tradução dos vocabulários, podemos entender esse método como o acréscimo de um novo filho.
Ele funciona exatamente dessa maneira, adiciona um nó (node, 'filho') ao final da lista de filhos (children) de um elemento pai (parent node).

Exemplo 2.7:

<html>
<head>
<title></title>
<style>
.ocultaObj {
 display: none;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function addLinha() {
var linha = document.createElement("hr");
document.getElementById("parag3").appendChild(linha);
}
</script>
<p id="parag3">Paragrafo Pai</p>
<botton style="border: 1px solid black;" onclick="addLinha()">Clique aqui!</botton>
</body>
</html>


Paragrafo Pai

Clique aqui!

1º) var linha = document.createElement("hr");
Em primeiro lugar, definimos qual será o novo elemento ou a nova tag a ser criada, nesse caso, a tag hr. Entretanto, ela precisa ser filho (child) de algum pai (parent).
2º) document.getElementById("parag3").appendChild(linha);
Na segunda linha fizemos referência ao atributo ID de uma tag e essa será o pai do novo elemento que será adicionado. Em seguida utilizamos o método appendChild informando a ele a tag que criamos na variável linha.
Para concluir, a tag hr criada pelo método createElement  foi adicionada como filho do elemento cujo atributo ID é igual a parag3.

Exemplo 2.8:
Como já foi dito a função appendChild() insere um elemento filho (children) ao elemento pai (parent) na última posição, ela auxilia na criação de um elemento DOM, veja o esquema da função:

elemento_pai.appendChild(elemento_filho)
Abaixo vemos um exemplo.
1º) Declarar o elemento pai
var elemento_pai = document.body;
2º) Declarar o elemento a ser adicionado
var titulo = document.createElement('h1');
3º) Inserir (anexar) o elemento filho (titulo) ao elemento pai (body)
elemento_pai.appendChild(titulo);
O código acima produzirá o seguinte HTML.

<body>
    <h1></h1>
</body>
Repare que não temos o nó de texto do elemento, que dizer, o título está vazio. Então precisamos criar e anexar o nó de texto e, mais uma vez, a função createTextNode() nos auxiliará.

1º) Declarar o elemento pai
var elemento_pai = document.body;
2º) Declarar o elemento a ser adicionado
var titulo = document.createElement('h1');
3º) Criar o nó de texto
var texto = document.createTextNode("Um título qualquer");
4º) Anexar o nó de texto ao elemento h1
titulo.appendChild(texto);
5º) Inserir (anexar) o elemento filho (titulo) ao elemento pai (body)
elemento_pai.appendChild(titulo);

O código acima produzirá um HTML diferente do anterior, veja:

<body>
    <h1>Um título qualquer</h1>
</body>

2.9 Método  removeChild()
Remove um nó da árvore de documentos (DOM). Contudo, tome cuidado: esse método não é chamado no mesmo nó a ser removido, mas no pai desse nó (conforme implica a parte "child" de seu nome). Chame o método a partir do nó pai e passe como argumento o nó filho que deve ser removido.

Para remover o nó n do documento:

var parent = n.parentNode;
parent.removeChild(n);

Vejamos um exemplo, imagine que você queira remover o item "outro item" da lista abaixo.
<ul>
    <li>mais um itens<li>
    <li>mais um itens<li>
    <li>outro item<li>
    <li>mais um itens<li>
</ul>

O código abaixo se encarrega de excluir o item desejado.

// Obtendo referências
var lista = document.getElementsByTagName('ul')[0];
var itens = lista.getElementsByTagName('li');

// Removendo determinado elemento
lista.removeChild(itens[2])
O código acima, se executado uma única vez, removerá o item de índice 2 (outro item) e teremos o seguinte HTML:

<ul>
    <li>mais um itens<li>
    <li>mais um itens<li>
    <li>mais um itens<li>
</ul>

2.10. Método document.createElement()
Este método cria um elemento HTML

No exemplo abaixo:
para = document.createElement("P"); // Cria o elemento <p>

t = document.createTextNode("This is a paragraph."); // Cria um texto nó, ou seja, no elemento
para.appendChild(t); // Adiciona o texto no <p>
document.getElementById("myDIV").appendChild(para); // Adiciona o <p> no <div id="myDiv">

Exemplo 2.9:
<html>
<head>
<title></title>
<style>
#myDIV {
    border: 1px solid black;
    margin-bottom: 10px;
}
</style>
</head>
<body>
<script>
function criaParagrafo() {
    var para = document.createElement("P"); // Create a <p> element
    var t = document.createTextNode("This is a paragraph."); // Create a text node
    para.appendChild(t); // Append the text to <p>
    document.getElementById("myDIV").appendChild(para); // Append <p> to <div> with
}
</script>
<botton style="border: 1px solid black;" onclick="criaParagrafo()">Clique aqui!</botton>
</body>
</html>
    
Clique aqui!

Entrada

2.11. Método insertBefore

O método appendChild insere o objeto sempre como o último filho (child) de um elemeto pai (parent).
Em certas ocasiões isto pode ser inconveniente, pois, em determinados momentos, precisamos inserir algum elemento em um local específico e não como o último filho de um pai.
Portanto, pensando nessa necessidade, utilizamos o método insertBefore ao invés do appendChild, pois assim inserimos a tag onde desejamos.
Vamos observar um exemplo utilizando o método insertBefore:
1º) Primeiramente, informarmos qual elemento será criado ("LI").
newItem = document.createElement("LI");
2º) Em seguida, inserimos conteúdo ao elemento criado.
textnode = document.createTextNode("Water");
3º) No terceiro passo indicamos o id do elemento pai (myList).
list = document.getElementById("myList");
4º) Faz-se a inserção propriamente dita, insere o novo item (newItem) na posição especificada (list.childNodes[0]).
list.insertBefore(newItem, list.childNodes[0]);

Exemplo 2.10:
<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var newItem = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    newItem.appendChild(textnode);

    var list = document.getElementById("myList");
    list.insertBefore(newItem, list.childNodes[0]);
}
</script>

</body>
</html>

Link para o exemplo

2.12. Método insertAfter()
O Javascript possui a função insertBefore(), mas não possui uma função similar para inserir após o objeto como é de se esperar que existisse uma chamada insertAfter(), mas podemos inserir um elemento após um determinado objeto utilizando a insertBefore():

function insertAfter ( newObj, target)
{
  target.parentNode.insertBefore ( newObj, target.nextSibling);
}

Para entender esta função, vamos primeiramente ver a sintaxe do comando insertBefore():
Função: insertBefore()
Descrição: Insere um elemento ao final do documento ou após um elemento especificado.
Sintaxe: elemento.insertBefore ( param1, param2)
Parâmetros:
param1: REQUERIDO – Novo elemento a ser adicionado.
param2: OPCIONAL – Elemento que se especificado o novo elemento (param1) será inserido após este (param2). Se omitido, inserere no final.
Como a função insertAfter() que foi criada informa o “target”.nextSibling como segundo parâmetro, quando não ouver um nextSibling no elemento, será retornado nulo, e fará com que a função insertBefore() insira o elemento no final.
Nota de inglês:
next
: adj. próximo, seguinte; adv. depois.
sibling: siblings é utilizado quando não importa o sexo dos irmãos, nem o número de irmãos que se tem.
Ex.: I have no siblings. / I have no brothers or sisters.
Ex.: It's such a crazy story and she needs to find her siblings. Would you please tell us her parents address?

Podemos extender o DOM e adicionar esta função a todos os elementos, utilizando o seguinte código:

Element.prototype.insertAfter = function ( newObj)
{
  this.parentNode.insertBefore ( newObj, this.nextSibling);
}

nextSibling: esses atributos informam que que o novo elemento será o próximo irmão da tag referenciada na variável referencia.

Desta forma, podemos utilizar o comando insertAfter() como utilizamos o comando insertBefore(), tal como:
document.getElementById ( 'alvo').insertAfter ( objeto);

Exemplo 2.11:
Este exemplo é uma pequena alteração do anterior, muda apenas o segundo parâmetro da função insertBefore().
<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>
<script>
function insertAfter ()
{
  var newItem = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);
  var list = document.getElementById("myList");
  list.parentNode.insertBefore (newItem, list.nextSibling);
}
</script>

</body>
</html>

Link para o exemplo

2.13. Método setAttribute
O método setAttribute tem a finalidade de inserir ou modificar um atributo em um determinado elemento existente.
Em certos momentos, quando criamos algum elemento, precisamos definir alguns atributos para ele e o método setAttribute tem esse propósito.

Este exemplo utiliza de métodos DOM level 1, por meio de JavaScript, e irá criar uma tabela HTML dinamicamente. A tabela criada deve ter 4 células e um conteúdo de texto dentro delas.

Exemplo 2.12:
<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
    function start() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 2; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createTextNode("cell is row "+j+", column "+i);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

Link para o exemplo

Observe a ordem de criação dos elementos:


Primeiro o elemento <table> é criado.
Depois o elemento <tbody>.
Depois um loop foi criado para fazer as linhas por meio de elementos <tr>. Eles foram inseridos dentro do elemento <tbody>.
Para cada elemento <tr>, um outro loop foi criado para os elementos <td> que são as células da tabela.
Para cada elemento <td> um nó de texto foi criado — este é de fato a célula visível com o texto.
Na media que os elementos são criados, eles são inseridos dentro de outros elementos criando-se uma estrutura com hierarquia. A inserção é feita a partir das "folhas" depois subindo na hierarquia, até  o final onde a tabela será inserida no HTML. Assim quando a tabela for inserida ela deverá aparecer completa.

Primeiro o nó de texto é inserido no elemento <td> por meio de:
cell.appendChild(cellText);
Depois nós colocamos o <td> chamados no código de "cell" dentro dos <tr>:
row.appendChild(cell);
Depois os <tr> são colocados dentro do <tbody> também com o uso da interface appendChild:
tblBody.appendChild(row);
o <tbody> na table:
tbl.appendChild(tblBody);
E finalmente a tabela é colocada dentro do corpo do HTML no elemento <body>:
body.appendChild(tbl);
Esta técnica é uma das mais básicas para a inserção de elementos no HTML e as interfaces também podem ser utilizadas para inserção de elementos em outros tipos de documentos baseados em XML que tem suporte para W3C DOM Level 1.

2.14. Método getAttribute
O termo get, significa: adquirir, pegar, receber, obter, dentre outros. Portanto, logo entedemos que getAttribute "pega" o atributo de um determinado elemento.
Assim como precisamos criar atributos, precisamos também obtê-los afim de manipularmos ou utilizá-los para certos objetivos.
A sintaxe dele é simples, observe:
getAttribute('nomeDoAtributo');
Com o código abaixo obteremos o valor do atributo especificado no método.
Exemplo:
var elemento = document.getElementById("titulo");
var atributo = elemento.getAttribute('id');
alert(atributo);

Exemplo 2.13:
<!DOCTYPE html>
<html>
<style>
#titulo {
color:#0000FF;
font-size: 40px;

}
</style>
<body OnLoad="showAttribute()">
<p id="titulo">Parágrafo com id = titulo</p>
<script type="text/javascript">
function showAttribute() {
var elemento = document.getElementById("titulo");
var atributo = elemento.getAttribute('id');
alert(atributo);
}
</script>
</body>
</html>

Link para o exemplo

Os exemplos tratados nesta página é apenas uma amostra do potencial que os métodos padronizados pelo DOM possui, para consultas mais aprofundadas podem ser obtidas nos links abaixo referenciados.

2.15. nodo
O DOM usa uma estrutura de árvore para guardar os elementos, cada "nó" pai pode ter varios "nós" filhos, e assim sucessivamente, do mesmo jeito que uma árvore tem galhos, e galhos sobre galhos. No XML temos o nó principal (no HTML seria a propria tag <html>), e esse nó tem varios filhos (<head> <body>), que pode ter mais outros filhos.  Usando esse pensamentos podemos percorrer o documento do jeito que quizermos.
: s. 1. enlaçamento de fios, de linhas, de cordas, de cordões, fazendo com que suas extremidades passem uma pela outra, amarrando-as. 2. vértice (matemática),3. ponto de conexão de rede (informática), terminal de árvore (programação).
nodo: sinônimo de nó.
node: nodo em inglês.

O DOM é uma árvore

Árvore representando o código ao lado
<html>
    <body>
        <p>Text</p>
        <div><img></div>
    </body>
</html>

The root: documentElement and body
The root is the DOM always document.documentElement. This special property will give access to the topmost HTML tag.
Another starting point can be the document.body, which represents the BODY tag.


Node.firstChild é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children).
Syntax
var childNode = node.firstChild;
node: elemento node (nó pai) de referência para busca do seu primeiro filho (firstChild) considerada a estrutura DOM.

childNode: elemento node (nó filho) considerado como primeiro filho (firstChild) de node (pai).
Descrição
childNode é uma referência para o primeiro filho (node) de uma estrutura DOM, um node (nó) que não tem filhos retornará null.

Exemplo 2.14

Este exemplo demonstra o uso do firstChild e como os espaços em branco "whitespace" de um node (nó) podem interferir.

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName);
</script>
No exemplo acima, o console.log() deverá exibir '#text' porque o nó de texto inserido mantém espaços em branco 'whitespace' entre a tag <p id="para-01"> e a tag <span>. Qualquer espaço em branco poderá causar '#text'.

"Tabs" também podem causar esse comportamento.
Se os espaços em branco for removidos do código, o '#text' não será mais considerado e a tag <span> se tornará o primeiro filho firstChild do parágrafo, conforme exemplo abaixo.

<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName)
</script>
Agora o console.log() irá exibir 'SPAN'.


Node representam elementos, texto, comentários, instruções de processamento, seções CDATA, atributos , e etc.


Tipos de node


public static final short ELEMENT_NODE
= 1;
public static final short ATTRIBUTE_NODE
=2;
public static final short TEXT_NODE
=3;
public static final short CDATA_SECTION_NODE
=4;
public static final short ENTITY_REFERENCE_NODE
=5;
public static final short ENTITY_NODE
=6;
public static final short PROCESSING_INSTRUCTION_NODE  
=7;
public static final short COMMENT_NODE
=8;
public static final short DOCUMENT_NODE
=9;
public static final short DOCUMENT_TYPE_NODE
=10;
public static final short DOCUMENT_FRAGMENT_NODE
=11;
public static final short NOTATION_NODE
=12;

DOM NODE TYPE
NODE
DESCRIPTION
CHILDREN
Document
entire document (the root-node of the DOM tree)
Element (max. one), ProcessingInstruction, Comment, DocumentType
DocumentFragment
Represents a "lightweight" Document object, which can hold a portion of a document
Element, ProcessingInstruction, Comment, Text, CDTASection, EntyReference
DocumentType
Provides an interface to the entities defined for the document
None
ProcessingInstruction
Represent a processing instruction
None

node
São cada um dos nós da árvore. Elementos, comentarios, texto. Tudo é um Node. Inclusive document. Element é um tipo de Node. TextNode também.
Você obtem Nodes de varias maneiras. Exemplos mais comuns

getElementById(), querySelector()
document, document.body, document.head...
Cada um dos filhos de uma NodeList/HTMLCollection.

Alguns atributos de Node

Node.nodeName: nome do Node. DIV, P, LI, #comment, #text...
Node.nodeType: tipo do Node. 1, 2, 3, 4...

node.nodeType === Node.ELEMENT_NODE;
node.nodeType === Node.TEXT_NODE;
node.nodeType === Node.COMMENT_NODE;
node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;

Outro atributo de node
Node.parentElement: Element pai (DOM4, IE9+)

document.getElementById( 'run' ).onclick = function(){
    if ( this.parentElement ) {
        this.parentElement.className += ' running';
    }
}

Mais outro atributo de Node
Node.parentNode: Node pai

document.getElementById( 'run' ).onclick = function(){
    var parent = this.parentNode;
    while ( parent ) {
        if ( parent.nodeType === Node.ELEMENT_NODE ) {
            this.parentElement.className += ' running';
            return;
        }
        parent = parent.parentNode;
    }
}

Outro atributo  de node
Node.textContent: todo o texto de dentro do Node (IE9+)

var style = document.querySelector( 'style.principal' );
var css = style.textContent; // ;)

document.getElementById( 'headline' ).textContent = 'Lorem ipsum dolor sit amet.';

Modifica sem causar reflow (android approved!)

Método interessante de node
Node.cloneNode()

var $$ = document.getElementsByClassName;
var menuClone = $$( 'main-nav' )[0].cloneNode( true );
$$( 'footer' )[0].appendChild( menuClone );

Cuidado para não duplicar IDs!

Node.insertBefore(): insere um Node antes de outro

var links = document.querySelectorAll( 'a.icon' );
var parent, icon;
for ( var i = 0, l = link.length; i < l; i++ ) {
    icon = document.createElement( 'i' );
    icon.className = link[ i ].getAttribute( 'data-icon' );
    parent = link[ i ].parentElement;
    parent.insertBefore( icon, link[ i ] )
}


Node.removeChild(): remove um Node filho e retorna ele
var parent = node.parentNode;
parent.removeChild( node );
Node.replaceChild(): substitui um Node filho por outro e retorna o substituído


Elements
São Nodes que são elementos HTML
Tem attributos como className, classList (DOM4), attributes, style, tagName...
Métodos como addEventListener, getAttribute, hasAttribute...

E você pode pesquisar dentro deles!

var container = document.getElementById( 'container' );
var items = container.getElementsByClassName( 'item' );
Você não precisa pecorrer o DOM inteiro quando sabe onde achar!

Você não precisa pecorrer o DOM inteiro quando sabe onde achar!
Use getElementsByClassName, getElementsByTagName, querySelector e querySelectorAll à vontade!

DocumentFragment
É um Node sem Pai :'(
Na verdade é um Node que nunca fez parte da àrvore. Não teve família!
Ou seja: quando você modifica o interior dele, não ocorre reflow.
Ele precisa ser adotado!

var ul = document.querySelector( '.list');
var frag = document.createDocumentFragment();
var frutas = [ 'Laranja', 'Maçã', 'Pera', 'Morango', 'Melancia', 'Jaca' ];
 
frutas.forEach(function( fruta ) {
    var li = document.createElement( 'li' );
    li.innerHTML = fruta;
    frag.appendChild( li );
});
 
ul.appendChild( frag );

Links
DOM Elightenment
MDN - Document Object Model
JavaScript APIs you’ve never heard of (and some you have)
How Browsers Work
Can I Use
Webpages As a Graph
 Métodos para Listas e Mapas


Interface Element


Interface Attr e Text


Interface Document



Cada node pode ser um (getNodeType()):
Element
Attribute
Text
Comment
Processing Instruction
etc.

Cada node possui um nome (getNodeName()):
Se o node é do tipo elemento → é o nome do elemento;
Se node é do tipo comentário → é #comment;
Se node é do tipo texto → é #text;
Se node e do tipo atributo → é o nome do atributo.

Muitos tipos de nodes não podem ter filhos, por exemplo:
Comentário
Instrução de Processamento
Atributo

Métodos da Interface node:
NamedNodeMap getAttributes(): Retorna a lista de atributos do node (para elemento) ou null caso contrario.
NodeList getChildNodes(): Retorna uma lista de todos os filhos do node.
String getLocalName(): Retorna o nome (sem o prefixo do namespace) do node.
String getNamespaceURI(): Retorna a URI do namespace do node, ou null se o namespace não tiver sido especificado.
String getNodeName(): Retorna o nome do node, dependendo do tipo do node.
short getNodeType(): Retorna um código que representa o tipo do node.
String getNodeValue()
Document getOwnerDocument()
String getPrefix()
String getTextContent()
Boolean hasAttributes()
Boolean hasChildNodes()

Métodos para navegação na Interface node:
Node getFirstChild(): Retorna o primeiro filho do node.
Node getLastChild(): Retorna o último filho do node.
Node getNextSibling(): Retorna o node imediatamente após o node atual.
Node getPreviousSibling(): Retorna o node imediatamente anterior ao node atual.
Node getParentNode(): Retorna o pai do node atual.
NodeList getChildNodes(): Retorna os filhos do node atual.

Interfaces Utilitárias a Node:
NodeList: Obtido, por exemplo, de getChildNodes();
int getLength(): Retorna o numero de nodes na lista.
Node item(int i): Retorna o i-ésimo item na lista.
NamedNodeMap: Obtido, por exemplo, de getAttributes();
int getLength(): Retorna o número de nodes no “mapa”.
Node getNamedItem(String name): Recupera um node especificado por um nome.

Métodos para manipulação na Interface Node:
Existem métodos para realizar diferentes operações com node, tais como:
Remover;
Adicionar;
Substituir;
Clonar nodes.

Métodos para manipulação na Interface Node:
Node appendChild(Node newChild): Adiciona um node no final da lista de filhos do node atual.
Node cloneNode(boolean deep): Retorna uma copia do node. O parâmetro indica se os descendentes devem ou não serem clonados também.
Node insertBefore(Node newChild, Node refChild): Insere um node antes do node refChild. 
Node removeChild(Node oldChild): Remove um node.
Node replaceChild(Node newChild, Node oldChild): Substitui o node oldChild por newChild, e retorna uma referencia para oldChild.


Both entry points are valid. But document.body can be null.

For example, you access document.body from an inline script in the HEAD, prepare to see null instead. That’s natural, because there is no BODY yet.
In the example below, first alert outputs null:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            alert("Body from HEAD: "+document.body) // null
        </script>
    </head>
    <body>
        <div>The document</div>
        <script>
            // different browsers output different text here,
            // because of different implementations of toString
            alert("Body from inside body: " + document.body)
        </script>
    </body>
</html>

Link para o código acima



Open the code in new window
Contrary to this, document.documentElement is available always.

Also note that document.body can’t be undefined. In the world of DOM, an “element not found” or “no such element” is always null.

As a more general rule than described above, it is impossible to reference elements that are not yet rendered at the time of script execution.

Child elements
There are several ways to obtain element children.

childNodes
An element keeps references to children in childNodes array-like property.

All nodes are referenced, including whitespace ones (excepts IE<9).

<!DOCTYPE HTML>
<html>
  <body>
    <div>Allowed readers:</div>
    <ul>
      <li>Bob</li>
      <li>Alice</li>
    </ul>
    <!-- a comment node -->
    <script> 
      function go() {
        var childNodes = document.body.childNodes
        for(var i=0; i<childNodes.length; i++) {
            alert(childNodes[i])
        }
      }
    </script>
    <button onclick="go()" style="width:100px">Go!</button>
  </body>
</html>

Open the code in new window
Note that SCRIPT node is listed too.

In the example document above, document.body.childNodes[1] is DIV in all browsers except IE<9. In older IEs, there are no whitespaces, so document.body.childNodes[1] is UL.

children
Sometimes we need to browse only element nodes, skipping text nodes. That’s what the children property is for.
It contains all element nodes. Check out the same example as above, but with children instead of childNodes.
It will output only element nodes as it should.

show clean source in new windowHide/show line numbersprint highlighted code
<!DOCTYPE HTML>
<html>
  <body>
    <div>Allowed readers:</div>
    <ul>
      <li>Bob</li>
      <li>Alice</li>
    </ul>
    <!-- a comment node -->
    <script> 
      function go() {
        var children = document.body.children
        for(var i=0; i<children.length; i++) {
            alert(children[i])
        }
      }
    </script>
    <button onclick="go()" style="width:100px">Go!</button>
  </body>
</html>


The firstChild and the lastChild


var body = document.body
alert(body.firstChild === body.childNodes[0])
alert(body.lastChild === body.childNodes[body.childNodes.length-1])

parentNode, previousSibling and nextSibling
The parentNode property references the parent node. It equals null for document.documentElement.
The previousSibling and nextSibling allow to access the left or the right neightbour.

objeto.childNodes - coleção com os nós filhos
objeto.parentNode - nó pai (o nó em qual ele está agrupado)
objeto.nextSibling - o próximo nó (ainda dentro do mesmo pai)
objeto.previousSibling - nó anterior (dentro do mesmo pai)
objeto.tagName - nome da tag
objeto.nodeName - nome da tag (mesma coisa que o anterior)

For example:



<!DOCTYPE HTML>
<html>
<head>
   <title>My page</title>
</head>
<body>
    <div>The header</div>
    <ul><li>A list</li></ul>
    <div>The footer</div>
</body>
</body>
</html>

lightweight (ˈlaɪtweɪt): adj. 1 leve (bicicleta, jaqueta, etc.), 2.  peso-pena (em boxe), 3 leve (romance, filme, etc.); s. peso-pena.
sibling (ˈsɪb.lɪŋ): a brother or sister, example: I have four siblings: three brothers and a sister.
There was great sibling rivalry (= competition) between Peter and his brother.
child (tʆaɪld): 1. criança (plural -dren).
parent (ˈpɛrənt):  s. pode referir-se ao pai ou à mãe, e.g., my parents (meus pais).
previous (ˈpriviəs): adj. 1. anterior, the previous day (o dia anterior).
entire (ɪnˈtaɪr): adj. inteiro, todo.
highlight (ˈhaɪlaɪt): v. 1. chamar a atenção para, realçar, 2. assinalar, destacar (com marca-texto), 3. destacar (em informática); s. 1. ponto alto, pl. highlights 1. mechas, 2. melhores momentos (de um jogo).
such (sʌtʆ): adv. 1. tão, He has such enormous feet! Ele tem um pé tão grande! I feel like such an idiot! Estou me sentindo tão idiota! such… (that) tão… que. It's such a tiny kitchen there's no room for a dishwasher. É uma cozinha tão minúscula, que não tem espaço para lava-louça. 2. tal, In such a situation you should call the police immediately. Em tal situação, você deveria chamar a polícia imediatamente. adj. tal, desse tipo. Such behavior is unacceptable. Tal comportamento é inaceitável. such as (tal) como. Cities such as São Paulo. Cidades grandes como São Paulo. no such thing, There's no such thing as a perfect marriage. Não existe casamento perfeito. I said no such thing! Não falei nada disso! pron. as such propriamente dito. He doesn't have a diploma as such. Ele não tem um diploma propriamente dito.
comment (ˈkɑmɛnt): s. 1. comentário, observação, 2. no comment: sem comentários; v. fazer comentários, comentar.
instead (ɪnˈstɛd)  adv. 1. instead of: em vez de. He took mine instead of his. Ele levou o meu em vez do dele. 2 em vez de algo já mencionado. Lucy couldn't go, so I went instead. Lucy não podia ir, então fui no lugar dela. There was no rice, so we had potatoes instead. Como não tinha arroz, comemos batatas.


HTMLCollection vs. NodeList
Ambas são listas contendo referencias ao DOM.

HTMLCollection quando usar
document.anchors, document.applets, document.forms, document.images, document.links, formElement.elements, selectElement.options, tableElement.rows, tableElement.tBodies, tableRowElement.cells, document.embeds.

NodeList quando usar
getElementsByTagName(), getElementsByClassName(), querySelectorAll() ou Node.childNodes.


HTMLCollection
HTML:
<body>
    <form id="form1">
        <!-- ... -->
    </form>
    <form name="form2">
        <!-- ... -->
    </form>
</body>

JS:
document.forms[ 'form1' ] === document.forms[ 0 ]; //true
document.forms.namedItem( 'form2' ) === document.form.item( 1 ); //true


HTMLCollection
Não use ids ou names repetidos num documento...
HTML:
<body>
    <form name="contato">
        <!-- ... -->
    </form>
    <form name="contato">
        <!-- ... -->
    </form>
</body>

Gecko:
document.forms[ 'contato' ]
// primeiro form[name='contato']

Webkit/IE:
document.forms[ 'contato' ]
// HTMLCollection com todos os form[name='contato']

Presto:
document.forms[ 'form' ]
// NodeList com todos os form[name='contato']

HTMLCollection
A especificação diz que o name tem precedência sobre id... mas nem sempre ela é respeitada

NodeList
São parecidas com HTMLColections, mas não tem os método namedItem() e, pela especificação, não deveriam poder ser acessadas via id ou name. Mas algumas engines implementam esse comportamento

São parecidas com HTMLColections, mas não tem os método namedItem() e, pela especificação, não deveriam poder ser acessadas via id ou name. Mas algumas engines implementam esse comportamento

HTML:
<body>
    <form id="contato1">
        <!-- ... -->
    </form>
    <form id="contato2">
        <!-- ... -->
    </form>
</body>

JS:
var forms = document.getElementsByTagName( 'form' );

forms[ 'contato1' ] // pode funcionar ou não

NodeLists são dinâmicas

HTML:
<body>
    <p>Paragrafo 1</p>
    <p>Paragrafo 2</p>
    <p>Paragrafo 3</p>
</body>

JS:
var paragrafos = document.getElementsByTagName( 'p' );
paragrafos.length; // 3
var novoParagrafo = document.createElement( 'p' );
document.body.appendChild( novoParagrafo );
paragrafos.length; // 4
querySelectorAll() não retorna uma Node

querySelectorAll() não retorna uma NodeList dinâmica :(
Apesar da especificação não dizer, na prática, HTMLCollections também são dinâmicas

NodeLists e HTMLCollections não são Arrays
NodeList instaceof Array; // false
HTMLCollection instaceof Array; // false
Mas podem ser transformadas

var paragrafos = document.querySelectorAll( 'p' );
paragrafos = Array.prototype.slice.call( paragrafos );
paragrafos.forEach(function( p ) {
    p.classList.add( 'red' );
});


Usando childNodes para retornar uma coleção de nós filhos de um determinado elemento HTML

Em algumas situações temos um elemento HTML (um elemento div, por exemplo) e gostaríamos de retornar uma coleção contendo seus elementos filhos. Para isso podemos usar a coleção childNodes, definida no World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1.

A coleção childNodes contém todos os descendentes diretos de um determinado elemento HTML, incluindo os nós textos (text nodes) e comentários (comment nodes). Além disso, a ordem dos elementos retornados é aquela definida no código-fonte do documento HTML.

Veja uma página HTML contendo um elemento div e, dentro deste, um parágrafo, um link e um elemento span. Note como usamos a propriedade childNodes no elemento div para retornar seus três elementos filhos diretos (note que as quebras de linhas e o elemento br também serão retornados):

<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">
  function obterNosFilhos(){
    // vamos obter uma referência ao elemento div com o id "container"
    var pai = document.getElementById("container");

    // vamos obter a coleção de elementos filhos
    var filhos = pai.childNodes;

    // vamos obter a quantidade de elementos filhos deste elemento
    window.alert("O elemento div contém " + filhos.length +
      " elementos filhos.");

    // vamos percorrer todos os elementos
    for(var i = 0; i < filhos.length; i++){
      var filho = filhos[i];

      // este filho é um nó texto?
      if(filho.nodeType == 3){
        window.alert("O " + (i + 1) + "º filho é um nó texto. " +
          "Seu conteúdo é: " + filho.data);
      }
      // este filho é um nó elemento?
      else if(filho.nodeType == 1){
        window.alert("O " + (i + 1) + "º filho é um nó elemento. " +
          "Seu conteúdo é: " + filho.innerHTML);
      }
    }
  } 
</script>

</head>
<body>

<div id="container">
<p>Sou um parágrafo</p>
<a href="http://www.google.com">Sou um link</a><br>
<span>E eu sou um elemento span</span>
</div>

<br>
<button onclick="obterNosFilhos()">Obter nós filhos do elemento div</button>

</body>
</html>

Ao executar este exemplo você perceberá que a quantidade de elementos filhos no IE é diferente daquela relatada pelo Firefox. Isso acontece devido à forma que os dois browsers tratam quebras de linhas e espaços. Tenha a certeza de usar a propriedade nodeType para identificar o tipo de elemento filho sendo retornado.

A coleção childNodes pode ser chamada a partir dos seguintes elementos: a, abbr, acronym, address, applet, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xml e xmp.

3. Reflow
É o nome dado ao processo que o browser utiliza para definir o posicionamento dos elementos na tela.
O processo de reflow é executado pelo browser sempre que um elemento do DOM é manipulado, algum estilo de posicionamento ou geometria é alterado ou o browser é redimensionado e etc. Além do elemento em questão, o processo de reflow é executado para todos os seus ancestrais e filhos, visto que eles precisam levar em conta os novos estilos do pai. Os elementos seguintes ao elemento afetado também passarão por reflow, uma vez que eles podem ter sido atingidos de alguma forma. A seguir, temos o que chamamos de repaint.

4. Repaint
Também conhecido como redraw, repaint é o nome dado ao processo que o browser utiliza quando precisa atualizar algum estilo que não afeta o layout da página, ou seja, não atinge posicionamento ou tamanhos de elementos. Um exemplo seria a troca da cor de background de um elemento em questão.

5. Exemplos
Exemplo 1:
<!DOCTYPE html>
  <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Transfere itens - Dual List</title>
   </head>
  
   <script>
              var strDes;
              var strRem;
  
              function onMoveItem(objRemetente, tdRemetente, objDestino, tdDestino){
             
              var totalRem;
              var totalDes;
              var strtemp
              var strValor;
             
              strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px; height: 100px'  name='" + objDestino.id + "' multiple='multiple' onchange='setaValor(this.id);'  height='200px'>";
              strRem = "<SELECT id='" + objRemetente.id + "'  style='WIDTH: 130px; height: 100px'  name='" + objRemetente.id + "' multiple='multiple' onchange='setaValor(this.id);'  height='200px'>";
             
              totalRem = objRemetente.length;
              totalDes = objDestino.length;           
  
              for (i=0; i < totalDes; i++){
                          strValor = objDestino.options[i].text;
                          strDes += "<option value='" + strValor + "'>" + strValor + "</option>";
              }
  
             
              for (i=0; i < totalRem; i++){
                          strValor = objRemetente.options[i].text;
                          if (objRemetente.options[i].selected){                                 
                                     strDes += "<option value='" + strValor + "'>" + strValor + "</option>"
                          }else{
                                     strRem += "<option value='" + strValor + "'>" + strValor + "</option>"
                          }
              }
             
              strDes += "</SELECT>";
              strRem += "</SELECT>";
             
              document.getElementById(tdDestino).innerHTML = strDes;
              document.getElementById(tdRemetente).innerHTML = strRem;
                         
              sortSelect(document.getElementById(objRemetente.id), true);
              sortSelect(document.getElementById(objDestino.id), true);
                         
   }
   </script>
  
   <body>
  <table width="100%" border="0" style="margin:100 1 1 1">
              <tr>
                          <td width="33%" align="center" >
                                    
                          </td>
                          <td width="34%">
                                     <table width="100%" border="0">
                                                 <tr>
                                                             <td align="center" id="tdFilhos">
                                                                         <SELECT id=cboFilhos style="WIDTH: 130px; height: 100px" name=cboFilhos multiple="multiple">
                                                                                    <option value="0">RS</option>
                                                                                    <option value="1">SC</option>
                                                                                    <option value="2">SP</option>
                                                                                    <option value="3">RJ</option>
                                                                                    <option value="4">TO</option>
                                                                                    <option value="5">AM</option>
                                                                                    <option value="6">CE</option>
                                                                         </SELECT>
                                                             </td>
                                                             <td valign="middle" align="center">
                                                                         <input type="button" id="btnMoverDir" name="cboMoverDir" value=">>" onClick="onMoveItem(cboFilhos, 'tdFilhos', cboFilhosSel, 'tdFilhosSel');"/><BR /><br />
                                                                         <input type="button" id="btnMoverEsq" name="cboMoverEsq" value="<<" onClick="onMoveItem(cboFilhosSel, 'tdFilhosSel', cboFilhos, 'tdFilhos');"/>
                                                             </td>
                                                             <td align="center" id="tdFilhosSel">
                                                                         <SELECT id=cboFilhosSel style="WIDTH: 130px; height: 100px" name=cboFilhosSel multiple="multiple" height="200px">
                                                                         </SELECT>                                                             
                                                             </td>
                                                 </tr>
                                     </table>
                          </td>
                          <td width="33%">
                          
                          </td>
              </tr>
   </table>
   </body>
   </html>

Resultado:






Exemplo 2:
<!DOCTYPE html>
  <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Transfere itens - Dual List</title>
   </head>
  
   <script>
              var strDes;
              var strRem;
  
              function onMoveItem(objRemetente, tdRemetente, objDestino, tdDestino){
             
              var totalRem;
              var totalDes;
              var strtemp
              var strValor;
             
              strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px; height: 100px'  name='" + objDestino.id + "' multiple='multiple' onchange='setaValor(this.id);'  height='200px'>";
              strRem = "<SELECT id='" + objRemetente.id + "'  style='WIDTH: 130px; height: 100px'  name='" + objRemetente.id + "' multiple='multiple' onchange='setaValor(this.id);'  height='200px'>";
             
              totalRem = objRemetente.length;
              totalDes = objDestino.length;           
  
              for (i=0; i < totalDes; i++){
                          strValor = objDestino.options[i].text;
                          strDes += "<option value='" + strValor + "'>" + strValor + "</option>";
              }
  
             
              for (i=0; i < totalRem; i++){
                          strValor = objRemetente.options[i].text;
                          if (objRemetente.options[i].selected){                                 
                                     strDes += "<option value='" + strValor + "'>" + strValor + "</option>"
                          }else{
                                     strRem += "<option value='" + strValor + "'>" + strValor + "</option>"
                          }
              }
             
              strDes += "</SELECT>";
              strRem += "</SELECT>";
             
              document.getElementById(tdDestino).innerHTML = strDes;
              document.getElementById(tdRemetente).innerHTML = strRem;
                         
              sortSelect(document.getElementById(objRemetente.id), true);
              sortSelect(document.getElementById(objDestino.id), true);
                         
   }
   </script>
  
   <body>
  <table width="100%" border="0" style="margin:100 1 1 1">
              <tr>
                          <td width="33%" align="center" >
                                    
                          </td>
                          <td width="34%">
                                     <table width="100%" border="0">
                                                 <tr>
                                                             <td align="center" id="tdFilhos">
                                                                         <SELECT id=cboFilhos style="WIDTH: 130px; height: 100px" name=cboFilhos multiple="multiple">
                                                                                    <option value="0">RS</option>
                                                                                    <option value="1">SC</option>
                                                                                    <option value="2">SP</option>
                                                                                    <option value="3">RJ</option>
                                                                                    <option value="4">TO</option>
                                                                                    <option value="5">AM</option>
                                                                                    <option value="6">CE</option>
                                                                         </SELECT>
                                                             </td>
                                                             <td valign="middle" align="center">
                                                                         <input type="button" id="btnMoverDir" name="cboMoverDir" value=">>" onClick="onMoveItem(cboFilhos, 'tdFilhos', cboFilhosSel, 'tdFilhosSel');"/><BR /><br />
                                                                         <input type="button" id="btnMoverEsq" name="cboMoverEsq" value="<<" onClick="onMoveItem(cboFilhosSel, 'tdFilhosSel', cboFilhos, 'tdFilhos');"/>
                                                             </td>
                                                             <td align="center" id="tdFilhosSel">
                                                                         <SELECT id=cboFilhosSel style="WIDTH: 130px; height: 100px" name=cboFilhosSel multiple="multiple" height="200px">
                                                                         </SELECT>                                                             
                                                             </td>
                                                 </tr>
                                     </table>
                          </td>
                          <td width="33%">
                          
                          </td>
              </tr>
   </table>
   </body>
   </html>
Link para o arquivo

Referência:
http://www.w3schools.com
http://www.w3c.br/Home/WebHome
https://developer.mozilla.org/pt-BR/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/getAttribute