DEV Community

Fernando
Fernando

Posted on

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

Top comments (0)

Read next

devwonder01 profile image

Switching from Chainlink VRF to Pyth Entropy

Mr Wonder -

eugene-khyst profile image

What’s New in ArtistAssistApp? November 2024 Enhancements Unveiled

Eugene Khyst -

zakwan_mustafa_050b9de8ef profile image

Tailwind CSS is such a game changer!!!

Zakwan Mustafa -

codewander profile image

Prisma, gtfs-schedule - rough, incomplete Trip models

Kanishka -