Home
índice
Página anterior

API DOM

imagem imagem imagem

(Document Object Model)

Segundo a W3C o Dom é uma interface independente de plataforma de linguagem que permite aos programas e scripts acessar e atualizar dinamicamente, a estrutura, o conteúdo e a estilização de documento seja ele html, xml ou qualquer outro documento. A primeira versão do Dom foi lançada em 1998 pela Word Wide Web consortium. Em 2000 foi lançada a segunda versão do dom, conhecida como dom nível2 e em 2004 foi lançado a terceira e última versão conhecida como dom nível3. Atualmente existem 3 subconjuntos de APIs dom.

Dom Core Api

A Dom Core é uma API neutra quanto a linguagem e modelos que podem ser implementados em qualquer linguagem de programação. Não precisa somente ser em javaScript, pode ser em C, java em qualquer outra linguagem. E para qualquer modelo baseado em XML. Existe uma biblioteca com o nome de Dom para manipular xml, na linguagem java, que é baseada nessa API concebida pela w3c. A API Dom Core é literalmente o núcleo do Dom fornecendo toda funcionalidade necessária para remover, modificar ou criar novos conteúdos em páginas Web.

Dom Html Api

A API Dom Html é voltada para documentos Html, com uma visão orientada a objetos html. Para cada elemento desta Api existe um correspondente na API Dom Html. A forma de trabalhar é bastante semelhante a Api Bom (Browser Object Model) trabalhada anteriormente.

A diferença é que ela é uma implementação de cada navegador sendo especificada pela w3c, numa tentativa de padronizar o acesso aos elementos html da mesma forma para todos os browsers. A dom core api é a mais genérica e a dom html foi feita baseada na Api Core. Ou seja tudo que é feito com dom html é feito com a API core. A primeira coisa a ser estudado nesta Api é o documento html. Todos os elementos do documento são acessados através da Api Dom Html.

Os elementos são apresentados em formato de uma árvore genealógica, com pais, filhos, irmãos, elementos ascendentes, descendentes, etc. Esses conceitos serão muito utilizados na Api Core Document Object Collections Existe uma outra referência na w3schools mostrando alguns objetos existentes nessa Api. Como o elemento document, o elemento que será utilizado nas duas Apis e interfaces dos objetos, para cada um dos elementos Html, é disponibilizado uma interface equivalente com os respectivos atributos e funções para serem acessados a partir da Api Dom Html.

Obs. A Api Dom Html é específica para trabalhar com documentos Dom Html. São recursos que facilitam o acesso aos atributos, definir um atributo. Alguns elementos são genéricos, para qualquer tipo de documento, como o objeto chamado de elemento, o atributo, nó, esses objetos serão encontrados em um documento xml ou um documento html. Na w3schools existe várias exemplos de utilização da Api Dom. JavaScript HTML DOM Examples

	No javaScript:
	window.onload = function() {
	/*localizar elementos
	By : Id, Name, Class, Selector*/
	//var tit = document.getElementById("tit_id");
	alert(tit);
	}
	Resultado: [object HTMLHeadingElement]
	/*cabeçalho html, nesse caso h2*/

	No javaScript:
	window.onload = function() {
	/*localizar elementos
	By : Id, Name, Class, Selector*/
	tit = document.getElementsByName("tit_name");
	alert(tit);
	}
	Resultado: [object NodeList]
	/*lista de objetos, ou um array de objetos*/

	No javaScript:
	window.onload = function() {
	tit = document.getElementsByClassName("tit_class");
	alert(tit);
	}
	Resultado: [object NodeList]
	/*lista de objetos, ou um array de objetos*/

	No javaScript:
	window.onload = function() {
	tit = document.getElementsByTagName("h2");
	alert(tit);
	}
	Resultado: [object NodeList]
	/*lista de objetos, ou um array de objetos*/

Existe uma função que ainda não está implementada em todos os browsers, no IE por exemplo ela não funciona. Seria muito útil se estivesse implementada em todos os browsers. Ela retorna o elemento que tenha um seletor Css específico.

No javaScript:
window.onload = function() {
tit = document.querySelector("#tit_id");
tit = document.querySelector("ul > li");
/*para recuperar uma li dentro de uma ul*/
tit = document.querySelector("p > a");
/*para recuperar uma tag a dentro de um p*/
 alert(tit);
 tit = document.querySelectorAll("#tit_id");
 /*Retorna vários elementos*/
 }
 Resultado: ---------
 /*não funcionou no ie, chrome e nem no fixefox*/

Para alterar o valor de um elemento Html

Usando a Api Dom Html é possível acessar os atributos do elemento, direto sem precisar chamar métodos ou funções.

No javaScript:
 window.onload = function() {
 var tit = document.getElementById("tit_id");
 tit.innerHTML = "API DOM (o título anterior era API DOM)";
 }
 Resultado: No cabeçalho do documento (o título anterior era API DOM)

Para alterar o estilo, a cor

  
 No javaScript:
 window.onload = function() {
 var tit = document.getElementById("tit_id");
 tit.innerHTML = "(o título anterior era API DOM)";
 tit.style.color = "#0000FF";/*Dom Html Api*/
 tit.set.Atribute("style", "color:#0000FF");//Dom Core Api
 }
 Resultado: A cor do cabeçalho fica alterada. Esta Api ajuda, mas não é aplicável em muitos casos.

Para recuperar uma imagem

No javaScript:
window.onload = function() {
var tit = document.getElementById("tit_id");
tit.innerHTML = "(o título anterior era API DOM)";
tit.style.color = "#0000FF";
//tit.set.Atribute("style", "color:#0000FF");//Dom Core Api

var img = document.getElementsByTagName("img")[0];>
img.border = "1px";//Dom Html Api
//img.setAttribute("border", "4px");//Dom Core Api
}
Resultado: Em torno da primeira imagem foi definida uma borda.