JavaTutorial de script DOM con ejemplo

Por: james hartman james hartman
Hours Actualizado

¿Qué es DOM en Java¿Texto?

JavaUn script puede acceder a todos los elementos de una página web mediante el uso del modelo de objetos de documento (DOM). De hecho, el navegador web crea un DOM de la página web cuando se carga la página. El modelo DOM se crea como un árbol de objetos como el siguiente:

DOM en JavaScript

Cómo utilizar DOM y eventos

Usando DOM, JavaEl script puede realizar múltiples tareas. Puede crear nuevos elementos y atributos, cambiar los elementos y atributos existentes e incluso eliminar elementos y atributos existentes. JavaScript También puede reaccionar a eventos existentes y crear nuevos eventos en la página.

getElementById, ejemplo de internalHTML

  1. getElementById: para acceder a elementos y atributos cuyo id está establecido.
  2. InnerHTML: Para acceder al contenido de un elemento.

Pruebe este ejemplo usted mismo:

<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>

getElementsByTagName Ejemplo

getElementsByTagName: para acceder a elementos y atributos utilizando el nombre de la etiqueta. Este método devolverá un matriz de todos los elementos con el mismo nombre de etiqueta.

Pruebe este ejemplo usted mismo:

<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>

Ejemplo de controlador de eventos

  1. createElement: para crear un nuevo elemento
  2. removeChild: Elimina un elemento
  3. Puede agregar un controlador de eventos a un elemento particular como este:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

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

Pruebe este ejemplo usted mismo:

<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>

Resumir este post con: