Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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:

  1. O objeto é buscado pelos atributos name ou id.
  2. 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

Tags:

Follow the Discussion

  • Antoni CarlosAntoni Carlos

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

  • acho q os exemplos do Dom poderiam ser mais dinamicos

  • Exemplos horríveis com erros =/

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

  • 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>
    

     

  • Sugiro o tutorial original do w3c.br

    http://www.w3c.br/cursos/html5/conteudo/capitulo16.html

  • Paulo Henrique Cajazeiras de VasconcelosPaulo Henrique Cajazeiras de Vasconcelos

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

  • Leo Wagner de SouzaLeo Wagner de Souza

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

  • @alexafunderground:

    vlw pelo exemplo corrigido e pelo tutorial

  • Giovanni AmorimGiovanni Amorim

    Valeu a correção Alex

  • JonatasJonatas

    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?

  • novattunovattu

    Estão fazendo as pressas !!

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

    XD

  • Manoel MotaManoel Mota

    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 FDGFabricio FDG

    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 NogueiraBeto Nogueira

    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.

  • brokenwingsguibrokenwings​gui

    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/

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.