JavaScript HTML DOM

El DOM de HTML (modelo de objeto de documento)

¿Qué es el DOM?

El DOM define un estándar para acceder a los documentos:

“El DOM es una plataforma y una interfaz de lenguaje neutral que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento”. 

 DOM se divide en 3 Puntos:

  • Core DOM – modelo estándar para todos los tipos de documentos
  • XML DOM – modelo estándar para documentos XML
  • HTML DOM – modelo estándar para documentos HTML

¿Qué es el DOM de HTML?

El DOM de HTML es un modelo de objeto estándar y una interfaz de programación para HTML. Se define:

  • Los elementos HTML como objetos.
  • Las propiedades de todos los elementos HTML.
  • Los métodos para acceder a todos los elementos HTML.
  • Los eventos para todos los elementos HTML.

El método getElementById

El método getElementById () devuelve el elemento que tiene el atributo ID con el valor especificado.

Este método es uno de los métodos más comunes en el DOM de HTML y se usa casi cada vez que desea manipular u obtener información de un elemento de su documento.

Devuelve nulo si no existen elementos con el ID especificado.

Una identificación debe ser única dentro de una página. Sin embargo, si existe más de un elemento con el ID especificado, el método getElementById () devuelve el primer elemento en el código fuente.

El método getElementsByClassName

El método getElementsByClassName () devuelve una colección de todos los elementos en el documento con el nombre de clase especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con un nombre de clase específico, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByName 

El método getElementsByName () devuelve una colección de todos los elementos en el documento con el nombre especificado (el valor del atributo del nombre), como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: puede usar la propiedad length del objeto NodeList para determinar el número de elementos con el nombre especificado, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByTagName 

El método getElementsByTagName () devuelve una colección de todos los elementos en el documento con el nombre de etiqueta especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: el parámetro “*” devuelve todos los elementos del documento.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con el nombre de etiqueta especificado, luego puede recorrer todos los elementos y extraer la información que desee.

La propiedad innerHTML

La forma más fácil de obtener el contenido de un elemento es mediante el uso de la propiedad innerHTML .

La propiedad innerHTML es útil para obtener o reemplazar el contenido de elementos HTML.

Veremos un ejemplo de la manipulación del DOM en HTML

En nuestro documento html tendremos dos entradas una de tipo “text” la cual tendrá un id el cual identificaremos con “entrada” y otra de tipo “button” en la cual su id será “btnElimina”.

Posteriormente tendremos una etiqueta “section” donde estarán situados nuestras cajas las cuales son simples “div” con un estilo fondo azul para ubicarlos y un contenido.

 

En la hoja de estilos editamos el estilo de los “div” a través de su clase “caja”  poniéndole un fondo azul.

En js tenemos que  declarar una variable para obtener por medio del id, el nodo de la etiqueta de entrada de tipo boton y posteriormente crearle un evento el cual se activara al momento de dar clic en el botón, en ese instante se declarara una variable “entrada” la cual obtiene por medio del id “entrada” los elementos de la etiqueta y una variable contenido para igualarla al valor de la variable entrada, y se mandara llamar la función agregaCaja.

La función agrega caja constara de declarar una variable que en este caso llamaremos divCaja la cual inicializaremos con un método para crear elemento el cual llevara el elemento a crear en este caso “div”.

Se declarara otra variable textDiv, pero esta vez crearemos un nodo de texto con el texto que nos llega por parámetro.

A la variable divCaja de añadiremos un elemento al nodo divCaja que en realidad es un “div”, y le agregamos un atributo de tipo class y su nombre de clase.

Creamos una variable padre, para obtener todos los elementos de estén que en nuestro caso es el “body”, para finalmente adherirle un hijo a padre que en este caso es la variable divCaja.

 

See the Pen
JzYqgJ
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.