██FR█████ █INTELL███████████

DOM – Document object Model


This content originally appeared on DEV Community and was authored by Fernando

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

2. document.URL

  • Valor que retorna: La URL completa del documento. 

console.log(document.URL); // Retorna la URL actual del documento

3. document.body

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

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

5. document.head

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

console.log(document.head); // Retorna el elemento head del documento

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

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

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

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

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

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

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

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

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"

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"

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"

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"

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>

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"

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"

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

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

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"

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

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>

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"

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

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

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

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

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

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

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

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

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

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"

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"

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


This content originally appeared on DEV Community and was authored by Fernando