Executando verificação de segurança...
1
jamesislan
3 min de leitura ·

JavaScript - DOM (D.O.M.)

JavaScript - DOM (D.O.M)

Introdução

O DOM, sigla para Document Object Model, é uma representação orientada a objetos de uma página na web, que pode ser modificada através do JavaScript.

Hierarquia DOM

Cada elemento da página pode ser especificado através da Árvore DOM. Cada elemento que está imediatamente embaixo de outro elemento é considerado elemento filho do elemento de cima (child). Já este elemento que está mais em cima na hierarquia é o pai (parent).

Para acessar o elemento strong, por exemplo, é preciso executar o comando:
window.document.html.body.p.strong

Tipos de DOM

getElementsByTagName()

Esse comando visa filtrar os objetos do documento conforme a sua tag HTML.

var paragrafos = window.document.getElementsByTagName('p')
/* A variável paragrafos está recebendo um conjunto com todo o conteúdo das tags <p>. Por isso, para que se obtenha apenas uma dessas tags, deve-se utilizar os colchetes ([]) para especificar o indice a ser pego*/

getElementById()

Esse comando visa filtrar objetos do documento pelo ID que lhe foi atribuído.

<body>
	<div id="content">
		<p>Conteúdo teste</p>
	</div>
	<script>
		var texto = window.document.getElementById('content')
		/*O elemento retornado para a variável será a div que foi nomeada
		 com o mesmo nome que foi passado como parâmetro.*/
	</script>
</body>

getElementsByName()

Esse comando visa filtrar objetos do documento pelo nome que lhe foi dado.
OBS: A principal diferença entre esse comando e o comando acima deste é que, diferente da filtragem por ID, mais de um elemento HTML pode possuir o mesmo nome, por isso o comando trata de Elements (no plural).

<body>
	<p name='texto'>Esse é o primeiro texto</p>
	<p name='texto'>Esse é o segundo texto</p>
	<script>
		var texto = window.document.getElementsByName('texto')
		/* O retorno será todos os elementos que tiverem o atributo "name"
		dentro da sua tag. Como nesse exemplo existem dois elementos, será
		necessário utilizar a seleção por colchetes ([]). */
	</script>
</body>

getElementsByClassName()

Esse comando visa filtrar objetos do documento conforme a sua classe.

<body>
	<div class='msg'>
		Clique em mim
	</div>
	<script>
		var texto = window.document.getElementsByClassName('msg')
		/* O retorno será todos os elementos que tiverem a mesma classe.
		Pode conter mais de um elemento, portanto, também deve-se usar
		colchetes para fazer a seleção. */
	</script>
</body>

querySelector() e querySelectorAll()

Esses comandos fazem parte da nova sintaxe presente no ECMAScript e faz uso da sintaxe do CSS para fazer a seleção de elementos.

<body>
	<div id='msg1'>
		Clique em mim
	</div>
	<div class='msg2'>
		Clique em mim também
	</div>
	<script>
		var texto = window.document.querySelector('div#msg')
		// O simbolo de hashtag "#" deve anteceder a seleção de um ID
		var texto2 = window.document.querySelector('div.msg2')
		// O símbolo de ponto "." deve anteceder a seleção de uma classe
	</script>
</body>

Modificação de Estilo Usando DOM

Utilizando os métodos do DOM, pode-se também fazer a modificação de estilo da página HTML utilizando os princípios da hierarquia de objetos.

<body>
	<p name='texto'>Esse é o primeiro texto</p>
	<p name='texto'>Esse é o segundo texto</p>
	<script>
		var corpo = window.document.body
			// Corpo do texto
		corpo.style.background = 'red'
			// Muda o plano de fundo do site para vermelho
		var texto = window.document.getElementsByName('texto')[0]
			// Primeiro parágrafo HTML
		texto.style.color = 'blue'
			// Irá mudar a cor do texto selecionado para azul
		var texto = window.document.getElementsByName('texto')[1]
			// Segundo parágrafo HTML
		texto2.style.background = 'yellow'
			// Irá mudar a cor de fundo do texto selecionado para amarelo
	</script>
</body>
Carregando publicação patrocinada...