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-formvar form = document.querySelector("form#my-form");form.tagName; // "form"form.id; // "my-form"form.style; // retorna un objeto con los estilos del elementoform.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 documentovar divs = document.querySelector("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 createTextNodevar text = document.createTextoNode("Hola");p.appendChild(text);// con innerHTMLp.innerHTML = "Hola";// con textContentp.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