22 - Métodos del DOM
Estructura inicial
En nuestra carpeta de proyecto crearemos la siguiente estructura:
/
├── js/
│ └── 22-metodos-dom.js
└── index.htmlY un código sencillo para nuestro HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22 - Métodos del DOM</title>
</head>
<body>
<h1>Temario de JavaScript</h1>
<div id="app">
<h2 class="titulo">Soy un h2</h2>
<p>Soy un párrafo</p>
</div>
<script src="./js/22-metodos-dom.js"></script>
</body>
</html>IMPORTANTE: El script debe cargarse al final de <body>
Seleccionar elementos
Para seleccionar un elemento de nuestro HTML podemos utilizar los siguientes métodos:
/* Seleccionando un elemento por ID */
const app = document.getElementById("app")
/* Seleccionando elementos por clase */
const titulos = document.getElementsByClassName("titulo")
/* Seleccionando elementos por etiqueta */
const parrafos = document.getElementsByTagName("p")No obstante, hoy en día existe un método más sencillo para hacer esto mediante selectores de CSS:
/* Seleccionando un elemento por ID */
const app = document.querySelector("#app")
/* Seleccionando un elemento por clase */
const titulo = document.querySelector(".titulo")
/* Seleccionando un elemento por etiqueta */
const parrafo = document.querySelector("p")También podemos usar querySelectorAll(), en cuyo caso devolverá un array de componentes
Modificar elementos
Podemos modificar tanto elementos que seleccionemos de nuestro HTML como elementos que creemos desde JavaScript.
Veamos algunas de sus propiedades:
innerText e innerHTML
Nos permite modificar el contenido interior de una etiqueta:
const titulo = document.querySelector(".titulo")
titulo.innerText = "Nuevo valor" //<h2 class="titulo">Nuevo valor</h2>
titulo.innerHTML = "Nuevo <i>valor</i>" //<h2 class="titulo">Nuevo <i>valor</i></h2>Por temas de seguridad, no se recomienda usar innerHTML
style
Nos permite modificar el estilo en línea de ese elemento.
Su estructura sería:
elemento.style.tipoEstilo = "valor"Veamos un ejemplo:
const parrafo = document.querySelector("p")
parrafo.style.color = "purple"
parrafo.style.margin = "20px" //<p style="color: purple; margin: 20px;">...classList
Nos permite modificar las clases de un elemento:
const parrafo = document.querySelector("p")
/* Añadir clases */
parrafo.classList.add("negrita") //<p class="negrita">...
/* Borrar clases */
parrafo.classList.remove("negrita") //<p>...
/* Alternar clases (Si tiene la clase la borra y no la tiene se la añade) */
parrafo.classList.toggle("negrita") //<p class="negrita">..
parrafo.classList.toggle("negrita") //<p>..
/* Reemplazar clases */
parrafo.classList.add("negrita")
parrafo.classList.replace("negrita", "cursiva") // <p class="cursiva">...Crear elementos
Su estructura sería:
document.createElement("elemento")Veamos un ejemplo de cómo crear un elemento, insertarle texto y añadirlo a nuestro HTML:
const app = document.querySelector("#app")
const saludo = document.createElement("p")
saludo.innerText = "Hola, mundo."
app.appendChild(saludo)Como puede observarse, para añadir nuestro elemento creado a otro existente usamos appendChild()
Borrar elementos
Usaremos el método remove() cuya estructura es:
elemento.remove()Veamos un ejemplo:
const titulo = document.querySelector(".titulo")
titulo.remove()