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.
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";
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
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);
}
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.Para eliminar un elemento debes invocar el método
removeChild
:var element = document.querySelector("div");
element.parentNode.removeChild(element);
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
Last modified 2mo ago