índice
Página anterior
DOM HTML API
| Atributo | Valor |
|---|
Dom Html Api
A Dom Html foi uma extensão feita à Dom Core Api criando-se um conjunto de interfaces que mapeia todos elementos, objetos, de um documento html. Ou seja ela é específica para trabalhar documentos html. Aprenda Html Dom Clicando nesse link, será aberta uma página com um tutorial de Dom. De início aparece uma árvore que representa o documento Html.
O documento Html é composto pela tag html, dentro de html tem dois elementos, head e body, dentro de body tem h2, div, tabela, lista, dentro de uma div tem outros elementos. Essa estrutura geralmente é representada no formato de uma árvore genealógica. Dentro do tutorial existe uma referência ao objeto Html Dom Reference. O elemento document permite acessar todas as imagens dele através da propriedade image, os links através da propriedade link, formulários etc.
Todos elementos html implementam uma interface element, que possui os atributos encontrados em qualquer elemento html. Eles serão encontrados em uma div, um link, enfim todos elementos terão as propriedades.
Para encontrar as Coleções
No javaScript:
window.onload = function() {
alert(document);
Resultado: [object HTMLDocument]
Para encontrar o Título
No javaScript:
window.onload = function() {
alert(document.title);
Resultado: O título do documento (nesse caso, Dom Html Api)
Para encontrar uma Imagem
No javaScript:
window.onload = function() {
alert(document.images);
Resultado: [object HTMLCollection]/*aqui retorna uma coleção*/
Para saber quantas imagens tem no documento
No javaScript:
window.onload = function() {
alert(document.images.length);
Resultado: 3/*quantidade de imagens, nesse documento 3*/
Para ver as imagens
O elemento imagem acessado é uma interface da Api Dom Html também. [HTMLImageElement].
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
alert(img[i]);
}
Resultado: [object HTMLImageElement]
Para saber o caminho da imagem
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
alert(img[i].src);
}
Resultado: http://localhost/javaScript/img/disponivel.jpg
Resultado: http://localhost/javaScript/img/indisponivel.jpg
Resultado: http://localhost/javaScript/img/selecionada.jpg
Para saber o alt da imagem
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
alert(img[i].alt);
}
Resultado: Disponivel
Resultado: Indisponivel
Resultado: Selecionada
Coleção de Links
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
alert(document.links[0]);
}
Resultado: http://localhost/index.html
Atribuindo alt ao Link
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
}
document.links[0].alt = "Título";
alert(document.links[0].alt);
Resultado: Título
Trabalhando com Formulários
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
}
alert(document.forms[0]);/*para recuperar um formulário*/
alert(document.forms.length);/*quantidade de formulários do documento*/
Resultado: [objectHtmlFormElement]
Resultado: 2
Recuperando uma Tabela
No javaScript:
window.onload = function() {
var img = document.images;
for(var i=0; i<img.length; i++){
}
var tb = document.getElementsByTagName("table").item(0);
alert(tb);
Resultado: [objectHTMLElement]
Tabelas
Obeservação:A Dom Html Api disponibiliza interfaces que já possuem as propriedades dos elementos Html de acesso rápido. As imagens vistas anteriormente são uma coleção e o HtmlCollection é também uma interface da Html Api. Esta Api tem um conjunto de funções e formas de acessar.