DOM - Document object Model
Published: 2024-07-07 16:19:44


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cphcr2mg9v9qzgvadb33.jpg)

---

# Propiedades
---




### 1. `document.title`

- **Valor que retorna:** El título del documento actual.
```javascript
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.

```javascript

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

```

### 3. `document.body`

- **Valor que retorna:** El elemento `<body>` del documento.

```javascript
console.log(document.body); // Retorna el elemento body del documento

```

### 4. `document.cookie`

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

```javascript

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.

```javascript

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>`).

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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").

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.
   
```javascript
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.

```javascript

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.
   
```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.
   
```javascript

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.

```javascript 

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.

```javascript

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.

```javascript

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.

```javascript

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).

```javascript

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`.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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.

```javascript

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

```