DOM - Document object Model

Fernando - Jul 7 - - Dev Community

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
Image
Các bước xây dựng trang web bán hàng đơn giản
Image
Lời khuyên của anh Đinh Minh Quyền – Founder thương hiệu English Talk – Biệt thự sách cho dự án khởi nghiệp của giới trẻ
Image
Day 68 / 100 Days of Code: Harnessing JavaScript’s Iterative Power

100daysofcode, webdev, javascript, beginners
Image
Các nhà nghiên cứu đưa ra thuật toán cách nếm
Image
Top nền tảng học online phổ biến và hiệu quả dành cho sinh viên IT
Image
Tạo miễn phí Website để bán hàng Online bằng Opencart
Image
Cải tiến và nâng cao chất lượng dạy tại FPT Polytechnic TP HCM với công cụ hiện đại
Image
Tiềm năng và thách thức của ngành Lập trình Game tại Việt Nam
Image
4 “bí kíp” hiệu ứng tâm lý của khách hàng giúp sinh viên Digital Marketing “hô biến” ý tưởng thành doanh số
Image
Cách mạng hóa sáng tạo và hiệu suất
Image
Dịch vụ Spa trong khách sạn: Lợi ích và tầm quan trọng
Image
Tầm quan trọng của việc bán hàng đa kênh và các kỹ năng đạt được khi gia nhập thị trường
Image
Tips sử dụng hiệu quả Java Collection Framework: List, Set và Map
Image
Xu hướng video ngắn năm 2024 sinh viên Thiết kế đồ họa không thể bỏ qua
Image
Môn học Quản trị các dịch vụ giải trí trong khách sạn có gì khiến sinh viên K18 mê mẩn?
Image
Creating Custom Aliases with Parameters in Bash: Simplify Your Workflow

bash, productivity, programming, community
Image
Một số hoạt động luyện phát âm và nói tiếng Anh cực hay tại FPT Polytechnic Đà Nẵng
Image
Sinh viên FPT Polytechnic nâng cao kỹ năng thuyết trình, bảo vệ thành công dự án cuối môn tiếng Anh
Image
Ảnh hưởng của TikTok đến chiến dịch Marketing tích hợp tại Việt Nam và vai trò của chuyên ngành Marketing & Sales
. . . . . . . . . . . .
Terabox Video Player