DOM, Um dia você vai precisar.

Pode deixar, eu não estou falando que você não tem dom pra internet, é só mais uma ferramenta de padronização da W3C, com o DOM (Document Object Model) pode-se ter um controle dinâmico da página, a partir do DOM, junto com html, css e JavaScript é feito o tão famoso DHTML, mas isso já é um outro assunto.

DOM – Como todos sabem a W3C é a responsável pela a padronização da internet e com isso foi criado o DOM, no intuito de unificar a forma de construir a estrutura de documento HTML, foi lançado em 1998. Existem duas definições o DOM Core e o DOM HTML. O DOM Core, é reponsável pela especificações de um documento XML, já no DOM HTML, como o próprio nome diz, é responsável pelas especificações de um documento HTML. Creio, que o assunto é um tanto quanto longo para detalha-lo em apenas um post, se necessário volto a falar sobre isso, considero-o de extrema importância.

Algumas características:

  • oferece uma maneira padrão de se acessar os elementos de um documento.
  • Pode-se trabalhar com cada elemento separadamente.
  • Adicionar, Modificar e/ou remover elementos, dinâmicamente.
  • Adicionar, Modificar e/ou remover conteúdo, dinâmicamente.
  • DOM é uma api, reduzindo o uso da memória.

Citei várias características, que para mim são vantagens, no entanto, se você nunca ouviu falar em DHTML (o que eu acho difícil), ou se já ouviu falar, mas nunca usou na prática, talvez não faça muito sentido pra ti. Porém, conhecimento nunca é demais e pretendo colocar algo aqui sobre DHTML.

VAMOS À PRÁTICA

DOM – ele é composto de uma hierarquia, imagine uma tabela em html, se você abre uma coluna e depois uma linha, você não pode fechar a coluna primeiro que a linha, pois a linha está dentro da coluna e é lógico não se pode fechar a tabela antes da linha e da coluna.

<html><body>

<table>

<td><tr id=”t1″>Teste 1</tr>

<tr id=”t2″>Teste 2</tr>

</td>

</table>

</body></html>

Acima está um exemplo de um documento html padrão, os elementos abrindo e fechando sem desrespeitar a hierarquia.

Você pode acessar os elementos do documento seguindo sua estrutura na árvore. Por exemplo, você poderia acessar seus elementos da seguinte forma:

document.body.childNodes[0].childNodes[1].childNodes[1]

Explicando:

A interface raiz é o document, após vem o elemento body, e após os seus nós filhos e assim por diante. Assim, você acabou de montar a sua hierarquia DOM Core.

Pode-se também procurar por um elemento em específico sem a necessidade de usar aquela árvore para localizar o elemento. Usando:

getElementById(’id’)

getElementsByName(’name’)

O primeiro retorna uma referência para um elemento ao passar o seu id, e o segundo retorna um array de elementos que possuem o name solicitado

Lembrando:

  • Cada elemento é chamado de nó.
  • Utiliza-se o javascript, para tal.

Ufa, esse foi um pequeno resumo de DOM…

Até mais.

 

 

 

2 respostas para DOM, Um dia você vai precisar.

  1. Leandro disse:

    Gostei do post!
    Vai ser legal se você voltar a falar sobre o assunto futuramente, tem bastante coisa pra se falar !

  2. Bruno disse:

    hahaha olha o preto fingindo que é visitante hahaha. Isso ai galera, força na cuecaaa. Bastante informativo o post. Vou favoritar essa parada aqui.
    Abraços

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: