Home
índice
Página anterior

Árvore

Dom Core Api

Essa Api é para manipulação de documentos baseados em Html ou Xhtml, sendo independente de linguagem de programação. Será utilizada para manipular elementos dentro do documento. Para trabalhar com a Dom Core Api, é necessário saber navegar pela árvore do documento. A página html abaixo está sendo renderizada a partir desse código Html. Esses elementos compõem os nós da árvore.

Existem 4 tipos principais de nós na árvore que são:

• Nó Documento - Representado pelo documento Html.
• Nó Elemento - Representado pelas tags.
• Nó tipo Atributo, Atributo id, atributo type.
• Nó tipo Texto - Nesse documento árvore é um exemplo de nó do tipo texto.

Ao trabalhar com a Core Api, os elementos são referenciados como se fossem Itens dentro de uma árvore genealógica. Em vários lugares será encontrada esse tipo de representação. O significado veio do fato de alguns elementos serem representados como os parentes em uma família. Um elemento pode ser pai de outro, filho, irmão. Documento por exemplo tem como filhos os elementos head e body. O elemento h2 e div são filhos de body. Assim sendo, h2 e div são irmãos. Resumindo; para navegar na árvore de um documento Html ou Xml utilizando a Core Api é importante saber se um elemento é pai, filho ou irmão de outro.

		 
<h2>Árvore</h2>
<div>
   <ul>
	<li id="Item 1">
	      Primeiro
	      <span style="color:blue;">Item</span>
	      <ul>
		   <li id="Item 1.1">Item 1.1</li>
		   <li id="Item 1.2">Item 1.2</li> 
		   <li id="Item 1.3">Item 1.3
		   <ul>
		      <li id="Item 1.3.1">Item 1.3.1</li>
		    </ul>
		</li>
	   </ul>
     </li> 
     <li id="Item 2">Item 2</li>
     <li id="Item 3">Item 3</li> 
     </ul>	 
 

Trabalhando com a Dom Core Api

No javaScript:
window.onload = function() {
/*Navegar na Árvore do Documento
Tipos de Nós (Documento, Elemento, Atributo e Texto)
Parentesco dos Nós (Pai=parent, Filho=child, Irmão=sibling)*/
var div = document.getElementsByTagName("div").item(0);
alert(div); //elemento
alert(div.parentNode); //pai do elemento
alert(div.childNodes); //filhos }
Resultado: [objectHTMLDivElement]
Resultado: [objectHTMLBodyElement]
Resultado: [object NodeList]

Tipo de Nó

No javaScript:
O tipo de nó é retornado como número. 1 para Elemento; 2 para Atributo; 3 para Texto.
window.onload = function() {
var div = document.getElementsByTagName("div").item(0);
alert(div.childNodes);//filhos
var ul = div.childNodes.item(0);
alert(ul.nodeType);//1=Elemento; 2=Atributo; 3=Texto
}
Resultado: 3