O DOM (sigla em inglês para Document Object Model) é uma interface neutra de plataforma e linguagem que permite a criação de aplicações web ricas em JavaScript, permitindo que o conteúdo, estrutura e estilo do documento HTML seja dinamicamente acessado e alterado via scripts.
Caso você ainda não tenha um conhecimento mais profundo sobre como funciona o DOM, existe um tutorial de JavaScript (em inglês) oferecido pela W3Schools com uma parte dedicada somente ao DOM, disponível neste link.
Diferenças do DOM no HTML5
O HTML5 trouxe algumas alterações no DOM que já eram aguardadas há bastante tempo pelos desenvolvedores, e outras que surgiram como novidades de grande potencial. Vamos às diferenças então !
getElementsByClassName
Um método muito esperado pelos desenvolvedores, e que serve para retornar todos os elementos que participem de uma certa classe. Como no exemplo abaixo, que retorna todos os elementos HTML pertencentes à classe “noticias”:
document.getElementsByClassName('noticias')
innerHTML
A propriedade innerHTML já era suportada pelos navegadores há muito tempo. Porém só agora ela se tornou um padrão.
Ela determina ou retorna o conteúdo HTML de um elemento, variando um pouco a sua sintaxe de acordo coma a sua utilização.
Caso o valor de um elemento deva ser retornado, a sintaxe é esta:
ElementoHTML.innerHTML
Caso a intenção seja determinar um valor à um elemento, a sintaxe é esta:
ElementoHTML.innerHTML=texto
activeElement e hasFocus()
Essas são novas propriedades do documento HTML5.
O activeElement contém o elemento que está tendo foco no momento, e o método hasFocus() que retorna o valor “verdadeiro” caso o documento contenha o foco.
Não entendeu muito para que isso serve ? Imagine que o seu usuário possa estar trabalhando com diversas janelas ou abas abertas (o que é bem comum), e ter deixado o navegador rodando a sua aplicação JavaScript em segundo plano. O método hasFocus é uma maneira que pode ser usada para tratar de ações que precisam de foco na aplicação atual.
document.head
Este também é um método novo do DOM, usado para ter acesso ao objeto <head> do documento.
Selector API
Apesar de não ser uma novidade do HTML5 (pois já existia há um certo tempo), esta propriedade é desconhecida de grande parte dos desenvolvedores, e é suportada pelo HTML5.
Com a Selector API, pode-se usar seletores CSS para encontrar elementos do DOM, expondo duas funções em cada um dos elementos: querySelector e querySelectorAll.
A consulta dos seletores é feita na sub-árvore do elemento em que a chamada foi feita. A querySelector retorna o primeiro elemento que satisfaça a chamada de seletor, e retorna null caso o contrário. A querySelectorAll retorna todos os elementos que satisfaçam a chamada de seletor.
Ainda tem mais…
Muitas mudanças foram feitas nessa nova versão do DOM. Alguns métodos que já eram usados viraram padrões,e houve a inserção de novos métodos.
Caso você tenha ficado curioso com o que mais mudou no DOM com o HTML5, recomendo que leia os capítulos 16 e 17 referentes à terceira parte do curso de HTML5 oferecido pelo escritório do W3C no Brasil, que está disponível neste link.
Gostou do texto? Já pensou em se qualificar e entrar para o mercado que mais cresce atualmente? Conheça e participe do curso Programador Web da Fábrica de Software para um Varejo mais competitivo em Campo Grande(MS). Este texto foi produzido como parte das atividades relacionadas com os estudos sobre os Princípios do Designer e páginas Web para Programadores, sobre a orientação do professor Marco Aurélio Dias de Oliveira.
Leia outros textos relacionados com Princípios do Designer e páginas Web para Programadores.
Aplicações offline com HTML5
Novos tipos de campos no HTML5
Usando MathML e SVG com HTML5
Tipos de Links no HTML5
O que são SERVER-SENT EVENTS no HTML5
O DOM e o HTML5
Menus e Toolbars no HTML5
O que é HTML5
Compatibilidade entre os navegadores com o HTML5
Novos elementos e atributos do HTML5
Até mais.
Temos 1 comentário :)