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
var 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
var divs = document.querySelectorAll("div");
for(var 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:

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

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

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

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

// con createTextNode
var 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 :

var 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:

var 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