Programacion

DOM en JavaScript

DOM en JavaScript

El DOM en JavaScript o modelo de objeto de documento (Document Object Model) proporciona formas de presentar, guardar y manipular un documento.

El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado por JavaScript.

Un nodo en el DOM es cualquier etiqueta del body.

Entre los nodos podemos encontrar los siguientes tipos:

El nodo document es el nodo raíz.
Element: son nodos definidos por etiquetas html.

Text es el texto contenido dentro de un nodo element.
Attribute son los aributos de los element.

Metodos de selección de elementos
document.GetElementById() Selecciona un elemento por id

document.GetElementByTagName() seleciona los elementos que coincidan con el nombre de la etiqueta especificada.

document.querySelector Devuelve un solo objeto coincidente con una clase (antecediendo al nombre con un punto). También puede ser utilizado para seleccionar por ID (antecediendo al nombre con un numeral).

document.querySelectorAll selecciona todos los elementos que coincidan con un argumento.

createElement crea un elemento.

Un elemento es unico.

innerHTML modifica su valor.

appendChild inserta un nuevo nodo dentro de la estructura DOM de un documento.

const contenedor = document.querySelector(".contenedor");
const fragmento = document.createDocumentFragment();
for (i = 0; i < 20; i++){
     const item = document.createElement("LI");
     item.innerHTML = "item de la lista";
     fragmento.appendChild(item);
}
contenedor.appendChild(fragmento);

firstElementChild retorna el primer elemento hijo de un elemento especificado.
lastElementChild retorna el último elemento hijo de un elemento especificado.

childNodes retorna todos los nodos hijos de un elemento especificado. El resultado es un NodeList

children devuelve un html colection de un elemento especificado.

replaceChild reemplaza un nodo hijo del elemento especificado por otro.

padre.replaceChild(hijo_nuevo, hijo_anterior)

removeChild elimina un hijo de un elemento especificado.

hasChildNodes evalua si un contenedor tiene hijos.

parentElement devuelve el elemento padre del DOM Element. parentNode es simillar pero parentElement devuelve un nodo mientras que parentElement devuelve una etiqueta html.

nextElementSibling retorna el siguiente Elemento que se encuentre al mismo nivel de un elemento.

previousElementSibling retorna el Element predecesor que se encuentre al mismo nivel de un elemento.

closest busca el contenedor ascendente mas cercano de un elemento.

Most Popular

To Top