HTML5 - DOM parte 1

O SOL que se refere a Modelo de Objeto de DocumentoNão é nada mais do que uma representação de objeto dos elementos que estão em nosso documento HTML, graças a isso podemos fazer uma conexão mais profunda com Javascript e consegue efeitos muito interessantes; No entanto, para chegar a esse nível, devemos primeiro saber muito bem como nos comportar dentro do DOM para sua implementação e uso.
Compreendendo o DOM
Expandindo o conceito de SOL Também podemos acrescentar que é uma coleção de objetos que representa o HTML No documento, em seu nome vemos o que é um modelo e a palavra-chave que ele representa é um modelo representativo do documento HTML.
O DOM é uma ferramenta chave no desenvolvimento WEB, uma vez que nos fornece uma ponte entre a estrutura e o conteúdo entre os nossos documentos HTML e Javascript.
O modelo de que estamos falando é criado pelo navegador ao interpretar o código HTML, a estrutura básica de um DOM pode ser vista da seguinte forma em um diagrama na imagem a seguir:

Como podemos ver, é baseado em uma estrutura hierárquica, com isso conseguimos que possamos utilizar os caminhos dessas relações para obter informações ou fazer alterações estruturais via Javascript.
Testando o DOM
Vamos realizar alguns testes simples em nosso documento para que possamos nos acostumar a como você pode trabalhar com ele. SOL, um dos primeiros testes que podemos realizar é verificar se uma funcionalidade está disponível no documento, vamos ver no seguinte código:

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções. 

Aqui nós apenas fizemos algo simples, primeiro verificamos se o método existe querySelectorAll, se existe, então a uma variável atribuímos o conteúdo de todos os elementos img eles têm o id paratexto, como estamos fazendo uma verificação em caso de falha, usamos uma forma diferente para obter os mesmos dados, neste caso é o getElementById e logo getElementByTagNameNo final, simplesmente com nossa variável definida, estamos iterando através de seu conteúdo e alterando suas propriedades CSS.
Talvez aqui o negativo que possamos ver é que se tivermos muitas verificações, nosso código pode se tornar complexo e ilegível, tudo é uma questão de compromissos entre o que queremos alcançar e a forma de alcançá-lo, desta forma podemos obter nosso resultados.
Na próxima parte deste tutorial, veremos alguns exemplos mais avançados de como continuar trabalhando com o DOM.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo