Blog Post

HTML5 - DOM e HTML5

Sign in to queue

The Discussion

  • User profile image
    Antoni Carlos

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

  • User profile image
    Leonardo​Almeida

    acho q os exemplos do Dom poderiam ser mais dinamicos

  • User profile image
    Ademilson

    Exemplos horríveis com erros =/

  • User profile image
    alexafunder​ground

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

  • User profile image
    alexafunder​ground

    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>
    

     

  • User profile image
    alexafunder​ground

    Sugiro o tutorial original do w3c.br

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

  • User profile image
    Paulo Henrique Cajazeiras de Vasconcelos

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

  • User profile image
    Leo Wagner de Souza

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

  • User profile image
    Ruggeri

    @alexafunderground:

    vlw pelo exemplo corrigido e pelo tutorial

  • User profile image
    Giovanni Amorim

    Valeu a correção Alex

  • User profile image
    Jonatas

    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?

  • User profile image
    novattu

    Estão fazendo as pressas !!

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

    XD

  • User profile image
    Manoel 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

  • User profile image
    Fabricio 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

  • User profile image
    Beto 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.

  • User profile image
    brokenwings​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/

Add Your 2 Cents