Manipulando HTML

Search…
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:
1
console.log(document.title);
2
​
3
document.title = "Nuevo título";
Copied!
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
1
// retorna el formulario con id my-form
2
var form = document.querySelector("form#my-form");
3
form.tagName; // "form"
4
form.id; // "my-form"
5
form.style; // retorna un objeto con los estilos del elemento
6
form.attributes; // retorna un objeto con los atributos del elemento
Copied!
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:
1
// retorna todos los div del documento
2
var divs = document.querySelectorAll("div");
3
for(var div of divs.entries()) {
4
  console.log(div);
5
}
Copied!
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:
1
var ul = document.createElement("ul");
2
​
3
var div = document.querySelector("div");
4
div.appendChild(ul);
Copied!
Para agregar texto puedes utilizar el método createTextNode, el atributo innerHTML o el atributo textContent:
1
var p = document.createElement("p");
2
​
3
// con createTextNode
4
var text = document.createTextNode("Hola");
5
p.appendChild(text);
6
​
7
// con innerHTML
8
p.innerHTML = "Hola";
9
​
10
// con textContent
11
p.textContent = "Hola";
Copied!
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 :
1
var element = document.querySelector("div");
2
element.parentNode.removeChild(element);
Copied!
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:
1
<div class="one two three"></div>
Copied!
Podemos listar, agregar y eliminar clases de la siguiente forma:
1
var div = document.querySelector("div");
2
div.classList; // "one two three"
3
​
4
div.classList.add("four");
5
div.classList.remove("one");
Copied!
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:
1
div.classList.toggle("one"); // agrega "one" si no existe o lo remueve si existe
Copied!
Primeros pasos
Escuchando eventos
Last modified 2mo ago
Copy link
Contents
El título del documento
Obteniendo elementos
Insertando elementos
Removiendo elementos
Agregando y removiendo clases de CSS