DOM o Modelo de objeto de documento es una API (Interfaz de programación de aplicaciones) que representa el documento HTML en forma de estructura de árbol de modo que los programas puedan acceder y cambiar el estilo y la estructura del documento HTML. El navegador web crea automáticamente el objeto DOM al abrir una página web HTML.
El HTML DOM contiene tres partes :
- Documento : Este es el documento HTML que creamos
- Objeto: Todos los Elementos y Atributos presentes en el documento HTML vienen bajo Objetos (Ej: <h1> <p> <img> etc)
- Modelo: La estructura de árbol de los elementos se denomina Modelo.
Representación estructural de HTML DOM:
Código HTML: considere un código HTML simple de la siguiente manera.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Welcome To GFG</h2> <p>Default code has been loaded into the Editor.</p> </body> </html>
El HTML DOM creado al abrir esta página web por el navegador web es el siguiente:
REPRESENTACIÓN HTML DOM
Funciones principales de HTML DOM
Las funciones de HTML DOM son las siguientes:
- La API DOM se puede utilizar para acceder y modificar los datos presentes en el documento HTML utilizando el lenguaje JavaScript . Podemos manipular lo siguiente usando la API DOM: elementos HTML, atributos y datos presentes entre las etiquetas y los estilos CSS.
- DOM permite a los programadores crear páginas web que usan HTML dinámico , es decir, esos sitios web que se actualizan sin actualizar el sitio web.
- También permite a los programadores desarrollar páginas web o sitios web que el usuario puede personalizar, es decir, el usuario puede editar los elementos HTML sobre la marcha. (Por Ej: cambiar el color de la página web o el botón)
- Funciona como un puente que dinamiza la página web utilizando el lenguaje JavaScript.
- Por lo tanto, para hacer que el sitio web sea más interactivo y dinámico, DOM proporciona varios métodos para acceder a los elementos y atributos mediante JavaScript. Algunos de los métodos disponibles son los siguientes
- getElementById() : este método se utiliza para acceder al elemento presente en el documento html utilizando su ID único.
- innerHTML: Esto se usa para cambiar el contenido presente entre los elementos.
- addEventListener() : este método se usa para obtener el objeto del evento si se activa un evento (como hacer clic con el mouse)
- appendChild() : este método se usa para agregar un elemento en el documento.
Veamos un ejemplo de HTML DOM: en el siguiente código HTML, obtenemos los datos proporcionados en el elemento del área de texto de entrada usando document.getElementById().value y cambiamos el texto usando document.write(). Por lo tanto, estas son las funciones principales de HTML DOM que ayudan a acceder y modificar los datos presentes en HTML.
índice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<form>
<div class="wrapper" style="text-align: center;">
Enter your name:
<input type="text" id="t1" />
<br><br>
<input type="submit"
style="position: absolute;"
onclick="func()" />
</div>
</form>
<script>
function func() {
var name = document.getElementById("t1").value;
document.write("Hello" + name +
",this text is printed using HTML DOM ");
}
</script>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA