JavaScript - DOM Acessando o elemento pelo nome da tag

Acessando o elemento pelo nome da tag

Olá amigos estamos de volta para falar de DOM (Document Object Model), o DOM ele não roda no Node.Js, somente no Browser.

Portanto nos exemplos desse post iremos usar JavaScript e exibí-los no html, ou seja, no Browser. Conto que você saiba o básico de html para poder rodar os exemplos no seu dispositivo.

No post anterior, nós aprendemos o que é o DOM e vimos a lista com os tipos de acesso aos elementos, vamos desvendá-la.

window.document.getElementsByTagName('nome da tag do elemento')[indice do elemento]

O código acima é uma função JavaScript que pegará todos os elementos com o nome da tag que fica entre os parenteses, e colocará todos em um Array, que facilitará o acesso de cada elemento identificando-o através do seu índice, o valor indicado entre os colchetes, exemplo abaixo:

<p>Paragrafo00:</p>

<p>Paragrafo01:</p>

<p>Paragrafo02:</p>

Acima temos 3 elementos com a tag de nome 'p', 3 paragrafos, o comando abaixo mostra como acessar cada paragrafo pelo seu ídice:

window.document.getElementsByTagName('p')[0]---> O valor entre parenteses é o nome da tag e o valor entre colchetes é o valor do índice. Nesse comando, o código dará acesso aos atributos ao elemento 0, você pode alterar o texto, cores e muito mais.

window.document.getElementsByTagName('p')[1]---> Acesso ao elemento 1.

window.document.getElementsByTagName('p')[2]---> Acesso ao elemento 2.

Abaixo temos uma imagem que ilustra o que foi escrito acima:

Espero que tenham gostado do post, essa é a segunda parte.

Sigam, compartilhem e comentem. Abraços!!