Métodos y Propiedades HTML DOM

El modelo DOM (Document Object Model) es una interfaz de programación de aplicaciones (API) que permite a los programas acceder y manipular el contenido, estructura y estilo de un documento HTML. Con las propiedades y métodos proporcionados por el DOM, los desarrolladores pueden crear y modificar contenido dinámicamente en una página web. En este artículo, exploraremos algunos de los métodos y propiedades más útiles del DOM y cómo utilizarlos para crear interacciones dinámicas en una página web.

Propiedades HTML DOM

innerHTML

La propiedad "innerHTML" permite modificar el contenido HTML dentro de un elemento. Se puede acceder a la propiedad utilizando Javascript y las modificaciones hechas en su contenido actualizan automáticamente la página web. Por ejemplo:
document.getElementById("miElemento").innerHTML = "Nuevo contenido";

textContent

La propiedad "textContent" devuelve el texto contenido en un elemento, sin incluir etiquetas HTML. Es similar al "innerHTML", pero solo devuelve texto en lugar de código HTML. Por ejemplo:
document.getElementById("miText").textContent = "Texto nuevo";

value

Para elementos de formulario, la propiedad "value" contiene el valor del elemento. Por ejemplo, si un usuario ingresa texto en un campo de formulario de entrada de texto, el valor se puede acceder utilizando la propiedad "value". Por ejemplo:
var x = document.getElementById("miInput").value;

Métodos HTML DOM

getElementById()

El método "getElementById()" retorna el primer elemento que coincide con el ID especificado. Por ejemplo:
var x = document.getElementById("miElemento");

getElementsByClassName()

El método "getElementsByClassName()" retorna una colección de elementos que coinciden con la clase CSS especificada. Por ejemplo:
var x = document.getElementsByClassName("miClase");

createElement()

El método "createElement()" crea un nuevo elemento HTML. Por ejemplo:
var x = document.createElement("p");

Ejemplos de uso de HTML DOM

Modificación de contenido HTML

El siguiente código crea un botón que cambia el texto de un elemento HTML después de hacer clic en él:

Cambiar texto

Texto original

Creación de un nuevo elemento HTML y agregándolo a la página web

El siguiente código crea un nuevo párrafo, le agrega contenido, y lo agrega a la página web.

Agregar párrafo




    
Texto original.

Conclusión

El acceso y manipulación del contenido de un documento HTML es esencial para crear páginas web dinámicas e interactivas. Los métodos y propiedades del HTML DOM permiten a los desarrolladores acceder y modificar el contenido del documento en tiempo real. Aprender a utilizar estas herramientas es una parte fundamental del desarrollo web moderno.

Preguntas Frecuentes

¿Qué es el modelo DOM en HTML?

El modelo DOM (Document Object Model) es una interfaz de programación de aplicaciones (API) que permite a los programas acceder y manipular el contenido, estructura y estilo de un documento HTML.

¿Qué es la propiedad innerHTML en el DOM?

La propiedad innerHTML permite modificar el contenido HTML dentro de un elemento utilizando Javascript.

¿Cómo se accede a la propiedad value en un elemento de formulario?

La propiedad "value" contiene el valor de un elemento de formulario y se puede acceder utilizando Javascript. Por ejemplo:
var x = document.getElementById("miInput").value;

¿Cómo se crea un nuevo elemento HTML utilizando el modelo DOM?

El método "createElement()" crea un nuevo elemento HTML. Por ejemplo:
var x = document.createElement("p");

Cómo crear un diccionario en JavaScript con pares clave-valor

Cómo cambiar CSS usando jQuery

Elimina todos los estilos de un elemento usando JavaScript

Cómo deshabilitar enlaces en JavaScript

Cómo exportar tablas HTML a Excel utilizando JavaScript

Cómo cambiar el puntero del mouse utilizando JavaScript

JavaScript textContent | Explicado

Cómo generar un número aleatorio entre dos números en JavaScript