Propiedades
1. document.title
Valor que retorna: El título del documento 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.
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.
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
