Saltar al contenido principal

Manipulando HTML

Utilizando el objeto document (o window.document) es posible:

  • Obtener o modificar el título del documento.
  • Obtener información de los elementos.
  • Insertar, eliminar, reemplazar, ocultar y mostrar elementos.
  • Agregar y eliminar clases de CSS.
  • Manipular el CSS de los elementos directamente.

El título del documento​

Para obtener o modificar el título del documento utiliza la propiedad title del objeto document:

console.log(document.title);

document.title = "Nuevo título";

Obteniendo elementos​

Para obtener un elemento utiliza el método querySelector que recibe un selector CSS válido y retorna el primer elemento que coincida o null si no coincide ninguno

// retorna el formulario con id my-form
let form = document.querySelector("form#my-form");
form.tagName; // "form"
form.id; // "my-form"
form.style; // retorna un objeto con los estilos del elemento
form.attributes; // retorna un objeto con los atributos del elemento

Puedes encontrar todos los atributos y métodos de los elementos en este recurso.

Para obtener varios elementos utiliza el método querySelectorAll que es similar a querySelector pero retorna todos los elementos que coinciden:

// retorna todos los div del documento
let divs = document.querySelectorAll("div");
for(let div of divs.entries()) {
  console.log(div);
}

Insertando elementos​

Para insertar elementos en el documento utiliza el método createElement para crear el elemento y appendChild para agregarlo. Por ejemplo, asumiendo que tenemos un div en el documento:

let ul = document.createElement("ul");

let div = document.querySelector("div");
div.appendChild(ul);

Para agregar texto puedes utilizar el método createTextNode, el atributo innerHTML o el atributo textContent:

let p = document.createElement("p");

// con createTextNode
let text = document.createTextNode("Hola");
p.appendChild(text);

// con innerHTML
p.innerHTML = "Hola";

// con textContent
p.textContent = "Hola";

Nota: innerHTML no sólo te permite agregar texto, también puedes agregar HTML, así que se puede ver como otra forma de insertar elementos.

Removiendo elementos​

Para eliminar un elemento debes invocar el método removeChild :

let element = document.querySelector("div");
element.parentNode.removeChild(element);

Agregando y removiendo clases de CSS​

Utiliza la propiedad classList para listar, agregar y eliminar clases de CSS de un elemento.

Asumiendo que tenemos un div con clases one two three:

<div class="one two three"></div>

Podemos listar, agregar y eliminar clases de la siguiente forma:

let div = document.querySelector("div");
div.classList; // "one two three"

div.classList.add("four");
div.classList.remove("one");

Otro método útil que podemos utilizar sobre classList es toggle que agrega una clase si no la tiene o la remueve de lo contrario:

div.classList.toggle("one"); // agrega "one" si no existe o lo remueve si existe