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.
En conclusión, el Document Object Model (DOM) en JavaScript es una herramienta esencial para trabajar con páginas web dinámicas. Con el DOM, puedes acceder y modificar el contenido y la estructura de una página web en tiempo real utilizando JavaScript.
Puedes utilizar funciones y métodos como “getElementById()”, “getElementsByTagName()” y “getElementsByClassName()” para seleccionar elementos específicos en una página web, y luego utilizar métodos como “innerHTML” y “textContent” para modificar su contenido.
Además, puedes utilizar eventos como “onclick” y “onload” para hacer que tu código responda a las acciones del usuario y actualizar la página web en tiempo real.
El DOM también es importante para el desarrollo de aplicaciones web modernas, ya que permite que tu código interactúe con otras tecnologías, como CSS y HTML5.
Es importante tener en cuenta que el uso excesivo del DOM puede afectar el rendimiento de una página web, especialmente en dispositivos móviles. Por lo tanto, es importante optimizar tu código para minimizar el impacto en el rendimiento.
En resumen, el DOM en JavaScript es una herramienta poderosa y esencial para trabajar con páginas web dinámicas. Si necesitas hacer que tu página web responda a las acciones del usuario y actualizar su contenido en tiempo real, ¡el DOM es una herramienta que debes conocer! Esperamos que este artículo te haya sido de utilidad.
Related posts:
