HTML5 - DOM e HTML5

DOM E HTML5

DOM e HTML5

O Modelo de Objetos do Documento (DOM, na sigla em inglês) é a interface entre a linguagem Javascript e os objetos do HTML. DOM é o método padrão para construção de aplicações ricas com Javascript e é amplamente conhecido e utilizado. Neste capítulo, supondo que você já conhece DOM para HTML 4 ou XHTML, vamos nos focar na diferença entre as versões anteriores do DOM e a do HTML 5.

Por quê DOM?

Os primeiros navegadores a incorporar um motor de Javascript tinham alert, prompt, document. write e mais meia dúzia de maneiras de se interagir com o usuário. E só. A idéia de acessar a árvore de objetos do HTML trouxe poder às interfaces com o usuário na web. A idéia era tão boa que os fabricantes de navegadores não puderam esperar até que tivéssemos uma especificação padrão que atendesse suas necessidades, e criaram cada um seu próprio método de resolver o problema. Isso resultou em anos e anos de incompatibilidade, em que era preciso escrever uma versão de seus scripts para cada navegador. Queremos, com certeza, evitar uma nova guerra de padrões. Por isso recomendamos a você, por mais sedutor que pareça utilizar um recurso proprietário Javascript, que se atenha ao DOM.

Vamos às diferenças

1. getElementsByClassName

Esse é um sonho antigo de todo desenvolvedor Javascript. Com HTML5 você pode fazer:

destaques = document.getElementsByClassName('destaque')

E isso retornará todos os elementos do HTML que possuem a classe "destaque".

2. innerHTML

Outro sonho antigo que se torna realidade. A propriedade innerHTML é uma idéia tão boa que todos os navegadores atuais já a suportam há muito tempo e todo desenvolvedor web sabe usá-la. Apesar disso, ela nunca havia sido descrita como um padrão.

Se porventura você nunca viu a propriedade innerHTML em ação (puxa, onde você estava nos úl-timos dez anos?) saiba que ela contém uma string, o conteúdo HTML da página. E você tem acesso de leitura e escrita a essa propriedade. Veja um exemplo de innerHTML:

function adicionaItem(nome){

document.getElementById('lista').innreHTML += '<li>'+nome+'</ li>'

}

3. activeElement e hasFocus()

O documento HTML5 tem uma nova propriedade, activeElement, que contém o elemento que possui o foco no momento. O documento também possui o método hasFocus(), que retorna true se o documento contém o foco. Seu usuário pode estar trabalhando com múltiplas janelas, abas, frames, ou mesmo ter alternado para outro aplicativo deixando o navegador com sua aplicação Javascript rodando em segundo plano. O método hasFocus() é uma conveniente maneira de tratar ações que dependem do foco na aplicação atual.

Veja um exemplo de script dependente de foco:

<!DOCTYPE html>
<htmllang=”pt-BR”>
<head>
<metacharset=”UTF-8” />
<title>Notifier</title>
<script>
functionnotify(text){
document.getElementById(‘msg’).innerHTML+=’<p>’+text+’</p>’
titleFlick()
}
functiontitleFlick(){
  if(document.hasFocus()){
document.title=’Notifier’
  return
}
document.title=document.title==’Notifier’?’* Notifier’:’Notifier’
setTimeout(‘titleFlick()’,500)
}
</script>
</head>
<body>
<input type=”button” id=”notify” value=”Notify in 5 seconds”
onclick=”notify(‘Will notify in 5 seconds...’);setTimeout(‘notify(\’Event shoot!\’)’,5000)” />
<divid=”msg”></div>
</body>
</html>

4. getSelection()

Os objetos document e window possuem um método getSelection(), que retorna a seleção atual, um objeto da classe Selection. A seleção tem, entre outros, os seguintes métodos e propriedades:

anchorNode

O elemento que contém o início da seleção

focusNode

O elemento que contém o final da seleção

selectAllChildern(parentNode)

Seleciona todos os filhos de parentNode

deleteFromDocument()

Remove a seleção do documento

rangeCount

A quantidade de intervalos na seleção

getRangeAt(index)

Retorna o intervalo na posição index

addRange(range)

Adiciona um intervalo à seleção

removeRange(range)

Remove um intervalo da seleção

Intervalos de seleção

Você deve ter notado acima que uma seleção é um conjunto de intervalos, da classe Range. Cada intervalo possui, entre outros, os seguintes métodos e propriedades:

deleteContent()

Remove o conteúdo do intervalo

setStart(parent,offset)

Seta o início do intervalo para o caractere na posição offset dentro do elemento DOM parent

setEnd(parent,offset)

Seta o final do intervalo para o caractere na posição offset dentro do elemento DOM parent

Tanto os objetos Selection quanto os objetos Range retornam o texto da seleção quando convertidos para strings.

document.head

O objeto document já possuía uma propriedade body, uma maneira conveniente de acessar o elemento body do HTML. Agora ele ganhou uma propriedade head, maneira também muito conveniente de acessar o elemento head.

Selector API

A Selector API não é novidade do HTML5, é anterior a ele. Mas como ainda é desconhecida de parte dos desenvolvedores, convém dizer que ela existe, e que continua funcionando no HTML5. Com a selector API você pode usar seletores CSS para encontrar elementos DOM.

A Selector API expõe duas funções em cada um dos elementos DOM: querySelector e querySelectorAll. Ambas recebem como argumento uma string com um seletor CSS. A consulta é sempre feita na subtree do elemento DOM a partir do qual a chamada foi disparada. A querySelector retorna o primeiro elemento que satisfaz o seletor, ou null caso não haja nenhum. A querySelectorAll retorna a lista de elementos que satisfazem o seletor.

Veja, neste exemplo, um script para tabelas zebradas com Selector API:

<!DOCTYPE html>
<htmllang=”pt-BR”>
<head>
<metacharset=”UTF-8” />
<title>Zebra</title>
<style>
.zebraon{background:silver}
</style>
<script>
window.onload=function(){
  varzebrar=document.querySelectorAll(‘.zebra tbody tr’)
  for(vari=0;i<zebrar.length;i+=2)
   zebrar[i].className=’zebraon’
}
</script>
</head>
<body>
<tableclass=”zebra”>
<thead><tr>
<th>Vendedor</th> <th>Total</th>
</tr></thead>
<tbody><tr>
<td>Manoel</td> <td>12.300,00</td>
</tr><tr>
<td>Joaquim</td> <td>21.300,00</td>
</tr><tr>
<td>Maria</td> <td>13.200,00</td>
</tr><tr>
<td>Marta</td> <td>32.100,00</td>
</tr><tr>
<td>Antonio</td> <td>23.100,00</td>
</tr><tr>
<td>Pedro</td> <td>31.200,00</td>
</tr></tbody>
</table>
</body>
</html>

Características especiais de DomNodeList

As listas de elementos retornadas pelos métodos do DOM não são Arrays comuns, são objetos DomNodeList, o que significa que, entre outros métodos especiais, você pode usar list[0]ou list(0)para obter um elemento da lista. Também pode usar list["name"]ou list("name") para obter um objeto por seu nome. Duas adições interessantes do HTML5 ao usar este último método:

O objeto é buscado pelos atributos name ou id.
Uma lista de campos de formulário com o mesmo valor no atributo name (uma lista de radio buttons, por exemplo) será retornada caso mais de um objeto seja encontrado. Essa lista contém um atributo especial, value, muito conveniente. Ele contém o valor do radio marcado e, ao ser setado, marca o radio correspondente.

Datasets

Você pode atribuir dados arbitrários a um elemento HTML qualquer, prefixando seus atributos com "data-". Por exemplo:

<img src="computador1.jpg" alt="Novo GNexius Forethinker" id="c1" data-processor="35Ghz" data-memory="48GB" data-harddrive="16TB" data-screen='45"' >

Você pode acessar esses valores via Javascript, através do atributo dataset, assim:

var img=document.getElementById('c1') 

proc=img.dataset.processor

As propriedades de dataset têm permissão de leitura e escrita.

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

Código Corrigido

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8" />
        <title>Zebra</title>
        <style>
            .zebraon {
                background:silver                    
            }
        </style>

        <script type="text/javascript">
            window.onload = function() {
                var zebrar = document.querySelectorAll('.zebra tbody tr');
                for(var i = 0; i < zebrar.length; i += 2)
                    zebrar[i].className = 'zebraon';
            };
        </script>
    </head>

    <body>
        
        <table class="zebra">
            <thead>
                <tr>
                    <th>Vendedor</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Manoel</td>
                    <td>12.300,00</td>
                </tr>
                <tr>
                    <td>Joaquim</td>
                    <td>21.300,00</td>
                </tr>
                <tr>
                    <td>Maria</td>
                    <td>13.200,00</td>
                </tr>
                <tr>
                    <td>Marta</td>
                    <td>32.100,00</td>
                </tr>
                <tr>
                    <td>Antônio</td>
                    <td>23.100,00</td>
                </tr>
                <tr>
                    <td>Pedro</td>
                    <td>31.200,00</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

Follow the Discussion

Follow
Oops, something didn't work.

Try again?

Sign In to be begin to follow these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.

Getting "follow" information

Stop following these comments

Start following these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.

Removing your "follow"

Setting up your "follow"

Did you know you can
sign up for email notifications?
- Subscribe to this comments

Antoni Carlos

Jul 18, 2012 at 9:20 AM

A explicação está muito boa,porem os exemplos estão faltando alguns espaços.
LeonardoAlmeida

Aug 15, 2012 at 3:47 PM

acho q os exemplos do Dom poderiam ser mais dinamicos
Ademilson

Aug 16, 2012 at 11:17 AM

Exemplos horríveis com erros =/
alexafunderground

Aug 31, 2012 at 4:30 PM

Os erros nos códigos de exemplo são realmente algo que empobrece o treinamento,
mas além disso está bem interessante.

alexafunderground

Aug 31, 2012 at 5:45 PM

alexafunderground

Aug 31, 2012 at 5:55 PM

Sugiro o tutorial original do w3c.br
http://www.w3c.br/cursos/html5/conteudo/capitulo16.html
Paulo Henrique Cajazeiras de Vasconcelos

Sep 03, 2012 at 8:52 PM

teoricamente esta tudo muito bom,mais falta mais explicações nos exemplos principalmente no que a de novo.
Leo Wagner de Souza

Sep 18, 2012 at 6:41 AM

Muito interessante o elemento dataset, que permite uma maneira elegante de trocar dados entre javascript e code behind, como asp.net.
Ruggeri

Oct 28, 2012 at 1:28 PM

@alexafunderground:
vlw pelo exemplo corrigido e pelo tutorial
Giovanni Amorim

Nov 16, 2012 at 10:29 AM

Valeu a correção Alex
Jonatas

Nov 21, 2012 at 10:35 AM

As correções são básicas, mas me tiram do sério, com as aspas inglesas...
Custa deixar os exemplos faceis para todos utilizarem e testarem? ou uma página já com os exemplos prontos?
novattu

Dec 19, 2012 at 4:29 PM

Estão fazendo as pressas !!

vamos fazer direito !!! não vamos deixar cair o nível daqui!!

XD
Manoel Mota

Dec 22, 2012 at 10:00 AM

A explicação foi show. Muito interessante os métodos e propriedades apresentadas até o momento. O método DomNodeList vai ser muito útil, pois reduzirá muito o retrabalho de código. Com esse método será possível recuperar vários objetos com a mesma propriedade name. Quanto aos erros é bom corrigí-los ajuda a compreender melhor o código :p
Fabricio FDG

Jan 15, 2013 at 3:02 PM

um pequeno pedaço do codigo errado pode comprometer toda programação em qualquer linha por isso deve ser significante mas não vamos pensar só nos erros mais possiveis acertos tem programas que contam quais as linhas está errada para poder consertar porem não é facil consertar basta um pouco de sacrificio apagando e tentando mas vai tentando quemsabe dá certo
Beto Nogueira

Jan 23, 2013 at 6:18 AM

Não sejam tão cricas meninas! A lógica/funcão está explicada de maneira correta e os erros são mais de estilo e digitação. Claro que é interessante que consertem para os adeptos do copy/paste ou iniciantes, mas para quem tem certo conhecimento e busca atualização o conteúdo está muito bom! Abraços a todos.
brokenwingsgui

Apr 18, 2013 at 12:02 PM

Ok! Massa, mas apesar a estrutura da estrutura HTML ali precisando de um ajuste corrigido pelo Alex, há algos que seriam relevantes a adicionar.

Como um diferença entre querySelector e getElement é o retorno, sendo static NodeList para query e live NodeList para getElement, o que dá um diferença em desempenho, sendo a live a mais rápida.

Para complementar o artigo segue o link da W3C BR: http://www.w3c.br/cursos/html5/conteudo/capitulo16.html

Além dos links da W3 comentando sobre o live e o static NodeList:
http://www.w3.org/TR/selectors-api/#queryselectorall
http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live

Um extra sobre ambos nodeList:
http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/