HTML5 - DOM parte 2

Na primeira parte deste tutorial vimos como está estruturado e como funciona o DOM, neste continuaremos a trabalhar com ele de forma a alargar as suas funcionalidades e poder manipular todos os elementos do nosso documento HTML.
Trabalhando com o DOM
Para acessar o objeto de documento, usamos uma variável de documento global; Esta variável é um dos principais objetos que o navegador cria para nós, pois é através deste objeto de documento que podemos acessar as informações do documento como um todo e nos dá acesso individual a cada objeto de documento.
Como sempre, vamos ver um exemplo com o qual podemos conciliar a teoria que conhecemos com a forma como ela é aplicada na realidade.

 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.

Um dos aspectos mais interessantes da fruta é a variedade disponível em cada país. Eu moro perto de Londres, em uma área conhecida por suas maçãs.

O código com o qual usamos o SOL É bastante curto e simples, porém captura os diferentes usos que podemos lhe dar, vamos explicar o código parte por parte para ver como utilizamos os objetos.
Uma das ações mais básicas que podemos usar é obter as informações do documento HTML com o qual estamos trabalhando, então a primeira linha que colocamos em nosso código faz exatamente isso e podemos ver:

document.writeln ("
URL: "+ documento.URL);

Neste caso, lemos o valor da propriedade document.URL, que retorna a URL do documento atual, ou seja, a URL que o navegador utilizou para carregar o documento no qual temos o código.
Também vemos como usamos o método writeln:

document.writeln ("
URL: "+ documento.URL);

Este método simplesmente adiciona conteúdo ao final do nosso documento HTML, neste caso particular, começamos adicionando uma tag 
 e a propriedade URL, com isso já modificamos a estrutura e o conteúdo do DOM.
Agora, a próxima coisa que fizemos foi selecionar todos os elementos que possuem a tag p no documento, para isso usamos a seguinte linha:

var elems = document.getElementsByTagName ("p");

Como vemos o método getElementsByTagName É o que serve ao nosso propósito, ao mesmo tempo tudo o que este método coleta atribuímos aos elementos variáveis.
Na próxima linha faremos uma iteração sobre a variável elems, obtendo os objetos atribuídos, para cada um que iremos iterar iremos adicionar uma linha de texto com o seu id e posteriormente iremos alterar os seus atributos para modificar a sua aparência .

 para (var i = 0; i <elems.length; i ++) {document.writeln ("ID do elemento:" + elems [i] .id); elems [i] .style.border = "médio duplo preto"; elems [i] .style.padding = "4px"; } 

Como podemos ver, adicionamos uma borda a cada elemento que armazenamos em nossos elementos variáveis ​​e, adicionalmente, adicionamos um preenchimento.
Depois de tudo isso, vamos finalmente ver como tudo isso fica no navegador:

PROLONGAR

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo