JavaTutorial de script DOM com exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

O que é DOM em JavaRoteiro?

JavaO script pode acessar todos os elementos em uma página da web usando o Document Object Model (DOM). Na verdade, o navegador da web cria um DOM da página da web quando a página é carregada. O modelo DOM é criado como uma árvore de objetos como esta:

DOM em JavaScript

Como usar DOM e eventos

Usando DOM, JavaO script pode executar múltiplas tarefas. Ele pode criar novos elementos e atributos, alterar os elementos e atributos existentes e até mesmo remover elementos e atributos existentes. JavaScript também pode reagir a eventos existentes e criar novos eventos na página.

getElementById, exemplo innerHTML

  1. getElementById: Para acessar elementos e atributos cujo id está definido.
  2. innerHTML: Para acessar o conteúdo de um elemento.

Experimente você mesmo este exemplo:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

Exemplo de getElementsByTagName

getElementsByTagName: Para acessar elementos e atributos usando o nome da tag. Este método retornará um ordem de todos os itens com o mesmo nome de tag.

Experimente você mesmo este exemplo:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

Exemplo de manipulador de eventos

  1. createElement: Para criar um novo elemento
  2. removeChild: remove um elemento
  3. Você pode adicionar um manipulador de eventos para um elemento específico como este:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

Experimente você mesmo este exemplo:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>

Resuma esta postagem com: