TheLazy.Dev
Portfolio GitHub

Blog

DOM - Document object Model

fernandomoyano

Fernando

Posted on July 7, 2024

DOM - Document object Model

Image description

Propiedades

1. document.title

  • Valor que retorna: El título del documento actual. 
console.log(document.title); // Retorna el título de la página actual
document.title = "Nuevo Título"; // Establece un nuevo título para la página
Enter fullscreen mode Exit fullscreen mode

2. document.URL

  • Valor que retorna: La URL completa del documento. 

console.log(document.URL); // Retorna la URL actual del documento
Enter fullscreen mode Exit fullscreen mode

3. document.body

  • Valor que retorna: El elemento <body> del documento. 
console.log(document.body); // Retorna el elemento body del documento
Enter fullscreen mode Exit fullscreen mode

4. document.cookie

  • Valor que retorna: Las cookies del documento en formato de cadena. 

console.log(document.cookie); // Retorna las cookies del documento
document.cookie = "usuario=Fernando; expires=Fri, 31 Dec 2024 23:59:59 GMT"; // Establece una cookie
Enter fullscreen mode Exit fullscreen mode

5. document.head

  • Valor que retorna: El elemento <head> del documento. 

console.log(document.head); // Retorna el elemento head del documento
Enter fullscreen mode Exit fullscreen mode

6. document.documentElement

  • Valor que retorna: El elemento raíz del documento (el elemento <html>). 

console.log(document.documentElement); // Retorna el elemento html del documento
Enter fullscreen mode Exit fullscreen mode

7. document.forms

  • Valor que retorna: Una colección de todos los formularios del documento. 

console.log(document.forms); // Retorna una colección de todos los formularios del documento
Enter fullscreen mode Exit fullscreen mode

8. document.images

  • Valor que retorna: Una colección de todos los elementos <img> del documento. 

console.log(document.images); // Retorna una colección de todos los elementos img del documento
Enter fullscreen mode Exit fullscreen mode

9. document.scripts

  • Valor que retorna: Una colección de todos los elementos <script> del documento. 

console.log(document.scripts); // Retorna una colección de todos los elementos script del documento
Enter fullscreen mode Exit fullscreen mode

10. document.anchors

  • Valor que retorna: Una colección de todos los elementos <a> con un atributo name en el documento. 

console.log(document.anchors); // Retorna una colección de todos los elementos <a> con un atributo name
Enter fullscreen mode Exit fullscreen mode

11. document.links

  • Valor que retorna: Una colección de todos los elementos <a> y <area> con un atributo href en el documento. 

console.log(document.links); // Retorna una colección de todos los elementos <a> y <area> con un atributo href
Enter fullscreen mode Exit fullscreen mode

12. document.readyState

  • Valor que retorna: El estado de carga del documento ("loading", "interactive", "complete"). 

console.log(document.readyState); // Retorna el estado de carga del documento
Enter fullscreen mode Exit fullscreen mode

13. document.referrer

  • Valor que retorna: La URL del documento que enlazó a este documento. 

console.log(document.referrer); // Retorna la URL del documento de referencia
Enter fullscreen mode Exit fullscreen mode

Metodos

1. document.getElementById(id)

  • Valor que retorna: El elemento con el ID especificado.
  • Parámetros que recibe:
    • id (string): El ID del elemento que se desea obtener. 

let elemento = document.getElementById("miElemento");
console.log(elemento); // Retorna el elemento con ID "miElemento"
Enter fullscreen mode Exit fullscreen mode

2. document.getElementsByClassName(className)

  • Valor que retorna: Una colección de todos los elementos en el documento con la clase especificada.
  • Parámetros que recibe:
    • className (string): El nombre de la clase de los elementos que se desea obtener. 

let elementos = document.getElementsByClassName("miClase");
console.log(elementos); // Retorna una colección de elementos con la clase "miClase"
Enter fullscreen mode Exit fullscreen mode

3. document.querySelector(selector)

  • Valor que retorna: El primer elemento que coincide con el selector CSS especificado.
  • Parámetros que recibe:
    • selector (string): Un selector CSS. 

let elemento = document.querySelector(".miClase");
console.log(elemento); // Retorna el primer elemento que coincide con el selector ".miClase"
Enter fullscreen mode Exit fullscreen mode

4. document.querySelectorAll(selector)

  • Valor que retorna: Una NodeList de todos los elementos que coinciden con el selector CSS especificado.
  • Parámetros que recibe:
    • selector (string): Un selector CSS. 
let elementos = document.querySelectorAll(".miClase");
console.log(elementos); // Retorna una NodeList de elementos que coinciden con el selector ".miClase"
Enter fullscreen mode Exit fullscreen mode

5. document.createElement(tagName)

  • Valor que retorna: Un nuevo elemento con el nombre de etiqueta especificado.
  • Parámetros que recibe:
    • tagName (string): El nombre de la etiqueta del nuevo elemento. 

let nuevoElemento = document.createElement("div");
console.log(nuevoElemento); // Retorna un nuevo elemento <div>
Enter fullscreen mode Exit fullscreen mode

6. element.setAttribute(name, value)

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • name (string): El nombre del atributo.
    • value (string): El valor del atributo. 

let elemento = document.getElementById("miElemento");
elemento.setAttribute("class", "nuevaClase");
console.log(elemento); // El elemento ahora tiene una clase "nuevaClase"
Enter fullscreen mode Exit fullscreen mode

7. element.getAttribute(name)

  • Valor que retorna: El valor del atributo especificado.
  • Parámetros que recibe:
    • name (string): El nombre del atributo. 

let elemento = document.getElementById("miElemento");
let valor = elemento.getAttribute("class");
console.log(valor); // Retorna el valor del atributo "class"
Enter fullscreen mode Exit fullscreen mode

8. element.appendChild(child)

  • Valor que retorna: El nodo agregado.
  • Parámetros que recibe:
    • child (Node): El nodo que se va a agregar como hijo. 

let nuevoElemento = document.createElement("div");
document.body.appendChild(nuevoElemento);
console.log(document.body); // El nuevo elemento <div> se ha agregado al body
Enter fullscreen mode Exit fullscreen mode

9. element.removeChild(child)

  • Valor que retorna: El nodo eliminado.
  • Parámetros que recibe:
    • child (Node): El nodo que se va a eliminar. 

let elemento = document.getElementById("miElemento");
let hijo = elemento.firstChild;
elemento.removeChild(hijo);
console.log(elemento); // El primer hijo del elemento se ha eliminado
Enter fullscreen mode Exit fullscreen mode

10. element.classList.add(className)

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • className (string): El nombre de la clase que se va a agregar. 

let elemento = document.getElementById("miElemento");
elemento.classList.add("nuevaClase");
console.log(elemento); // El elemento ahora tiene la clase "nuevaClase"
Enter fullscreen mode Exit fullscreen mode

11. element.classList.remove(className)

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • className (string): El nombre de la clase que se va a eliminar. 

let elemento = document.getElementById("miElemento");
elemento.classList.remove("nuevaClase");
console.log(elemento); // La clase "nuevaClase" se ha eliminado del elemento
Enter fullscreen mode Exit fullscreen mode

12. document.getElementsByTagName(tagName)

  • Valor que retorna: Una colección de todos los elementos con el nombre de etiqueta especificado.
  • Parámetros que recibe:
    • tagName (string): El nombre de la etiqueta de los elementos que se desea obtener. 

let elementos = document.getElementsByTagName("p");
console.log(elementos); // Retorna una colección de todos los elementos <p>
Enter fullscreen mode Exit fullscreen mode

13. document.getElementsByName(name)

  • Valor que retorna: Una colección de todos los elementos con el atributo name especificado.
  • Parámetros que recibe:
    • name (string): El valor del atributo name de los elementos que se desea obtener. 

let elementos = document.getElementsByName("username");
console.log(elementos); // Retorna una colección de todos los elementos con el atributo name="username"
Enter fullscreen mode Exit fullscreen mode

14. document.importNode(externalNode, deep)

  • Valor que retorna: Una copia del nodo especificado importado al documento actual.
  • Parámetros que recibe:
    • externalNode (Node): El nodo que se va a importar.
    • deep (boolean): Si se deben importar todos los descendientes del nodo. 

let nodoExterno = document.createElement("div");
let nodoImportado = document.importNode(nodoExterno, true);
document.body.appendChild(nodoImportado); // Importa y agrega el nodo al body
Enter fullscreen mode Exit fullscreen mode

15. element.insertAdjacentHTML(position, text)

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • position (string): La posición relativa al elemento ("beforebegin", "afterbegin", "beforeend", "afterend").
    • text (string): El HTML a ser insertado. 

let elemento = document.getElementById("miElemento");
elemento.insertAdjacentHTML("beforeend", "<p>Nuevo párrafo</p>");
console.log(elemento); // Inserta un nuevo párrafo antes del final del elemento
Enter fullscreen mode Exit fullscreen mode

16. element.insertAdjacentElement(position, element)

  • Valor que retorna: El nodo insertado.
  • Parámetros que recibe:
    • position (string): La posición relativa al elemento ("beforebegin", "afterbegin", "beforeend", "afterend").
    • element (Element): El elemento que se va a insertar. 

let elemento = document.getElementById("miElemento");
let nuevoElemento = document.createElement("div");
elemento.insertAdjacentElement("afterend", nuevoElemento);
console.log(elemento); // Inserta el nuevo elemento después del elemento original
Enter fullscreen mode Exit fullscreen mode

17. element.addEventListener(type, listener, options)**

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • type (string): El tipo de evento (por ejemplo, "click").
    • listener (function): La función que se ejecutará cuando el evento se dispare.
    • options (object): Opciones adicionales para el controlador de eventos (por ejemplo, { once: true } para ejecutar una sola vez). 

let boton = document.getElementById("miBoton");
boton.addEventListener("click", function() {
  alert("Botón clickeado");
}, { once: true }); // Ejecuta la función solo una vez
Enter fullscreen mode Exit fullscreen mode

18. element.removeEventListener(type, listener, options)

  • Valor que retorna: No retorna ningún valor.
  • Parámetros que recibe:
    • type (string): El tipo de evento.
    • listener (function): La función que se desea eliminar.
    • options (object): Opciones adicionales que coinciden con las usadas en addEventListener. 

let boton = document.getElementById("miBoton");
function miFuncion() {
  alert("Botón clickeado");
}
boton.addEventListener("click", miFuncion);
boton.removeEventListener("click", miFuncion, { once: true }); // Elimina el evento "click" del botón con opciones
Enter fullscreen mode Exit fullscreen mode

19. element.dispatchEvent(event)

  • Valor que retorna: Un booleano que indica si el evento fue cancelable.
  • Parámetros que recibe:
    • event (Event): El evento a despachar. 

let boton = document.getElementById("miBoton");
let evento = new Event("click");
boton.dispatchEvent(evento); // Despacha el evento "click" en el botón
Enter fullscreen mode Exit fullscreen mode

20. node.childNodes

  • Valor que retorna: Una colección de todos los nodos hijos del nodo especificado. 

let contenedor = document.getElementById("miContenedor");
console.log(contenedor.childNodes); // Retorna una colección de todos los nodos hijos del contenedor
Enter fullscreen mode Exit fullscreen mode

21. node.firstChild

  • Valor que retorna: El primer nodo hijo del nodo especificado. 

let contenedor = document.getElementById("miContenedor");
console.log(contenedor.firstChild); // Retorna el primer nodo hijo del contenedor
Enter fullscreen mode Exit fullscreen mode

22. node.lastChild

  • Valor que retorna: El último nodo hijo del nodo especificado. 

let contenedor = document.getElementById("miContenedor");
console.log(contenedor.lastChild); // Retorna el último nodo hijo del contenedor
Enter fullscreen mode Exit fullscreen mode

23. node.nextSibling

  • Valor que retorna: El nodo inmediatamente siguiente al nodo especificado. 

let nodo = document.getElementById("miNodo");
console.log(nodo.nextSibling); // Retorna el nodo inmediatamente siguiente a "miNodo"
Enter fullscreen mode Exit fullscreen mode

24. node.previousSibling

  • Valor que retorna: El nodo inmediatamente anterior al nodo especificado. 

let nodo = document.getElementById("miNodo");
console.log(nodo.previousSibling); // Retorna el nodo inmediatamente anterior a "miNodo"
Enter fullscreen mode Exit fullscreen mode

25. node.replaceChild(newChild, oldChild)

  • Valor que retorna: El nodo hijo reemplazado.
  • Parámetros que recibe:
    • newChild (Node): El nuevo nodo que reemplazará al antiguo.
    • oldChild (Node): El nodo que será reemplazado. 

let contenedor = document.getElementById("miContenedor");
let nuevoNodo = document.createElement("div");
let nodoViejo = document.getElementById("nodoViejo");
contenedor.replaceChild(nuevoNodo, nodoViejo); // Reemplaza el nodo viejo con el nuevo nodo en el contenedor
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
fernandomoyano
Fernando

Posted on July 7, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

🫵You Should Try These Tools In Your Next Project
webdev 🫵You Should Try These Tools In Your Next Project

November 30, 2024

Understanding HTTP, Cookies, Email Protocols, and DNS: A Guide to Key Internet Technologies
webdev Understanding HTTP, Cookies, Email Protocols, and DNS: A Guide to Key Internet Technologies

November 30, 2024

Git Mastery: Essential Questions and Answers for Developers 🚀
softwareengineering Git Mastery: Essential Questions and Answers for Developers 🚀

November 30, 2024

Seeking Help to Create a Simple API for Pokémon Data
api Seeking Help to Create a Simple API for Pokémon Data

November 30, 2024