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

congcong profile image

GBASE数据库 | Introduction to GBase 8a MPP Cluster Data Loading and Performance Tuning

Cong Li -

arjun_das profile image

How to Turn On or Off Show Accent Color on Start menu and Taskbar in Windows 11?

Arjun Das -

sandr0p profile image

Structuring Your Space: Designing a Visual Grid

sandr0-p -

arjun_das profile image

How to Change Accent Color in Windows 11?

Arjun Das -