17. JavaScript en HTML: seleccionar elementos
Selección de elementos de un documento HTML
JS permite modificar, eliminar, añadir, mostrar, esconder, etc, los elementos que componen un documento HTML.Para poder manipular un elemento, debemos de seleccionarlo primeramente.
Selección del elemento por su "id"
Ya sabemos que a los elemento HTML les podemos añadir un atributo "id".
Para selecciónar un elemento por el valor de su atributo "id" usaremos la función getElementById().
Ejemplo:
HTML: <h1 id="titular">Lorem ipsum</h1>
JS: var a = document.getElementById("titular");
Si escribimos a continuación "console.log(a);" veremos que en la consola de nuestro navegador aparece una referencia al elemento <h1> que hemos seleccionado.
Si clicamos sobre el triangulito que aparece a la izquierda del elemento en la consola, se expandirán detalles sobre dicho elemento. Esa información esta representada en forma de pares clave-valor. En realidad son propiedades de un objeto, porque lo que hemos recuperado en realidad es la representación del elemento "h1" en forma de objeto que hay en el DOM, no el elemento del documento HTML.
Selección del elemento por su nombre de etiqueta
HTML:
<h1>Lorem ipsum</h1>
JS:
var a = document.getElementsByTagName("h1");
console.log(a[0]);
En este caso, la variable "a" almacena un objeto del tipo HTMLCollections, que contiene a su vez el elemento "h1".
El objeto HTMLCollections es muy parecido a un array, así que será posible acceder a cada uno de los elementos a través de un indice. En el ejemplo anterior, podemos probar a escribir a continuación lo siguiente:
console.log(a[0]);
Como podemos comprobar, de esa manera seleccionamos el elemento "h1".
En el caso de que la selección dé como resultado varios elementos, es posible seleccionar uno de ellos directamente a través de su posición en el objeto HTMLCollections.
Ejemplo:
HTML: <h1>Lorem ipsum</h1>
<h1>Dolor sit amet</h1>
JS: var a = document.getElementsByTagName("h1");
console.log(a[0]);
console.log(a[1]);
Tambien podemos hacer la selección del elemento "h1" de manera más directa añadiendo el indice entre corchetes a continuación de la función getElementsByTagName():
Ejem:
var a = document.getElementsByTagName("h1")[0];
var b = document.getElementsByTagName("h1")[1];
console.log(a);
console.log(b);
Selección el elemento por el valor del atributo "class"
HTML: <h1 class="titular">Lorem ipsum</h1>
JS: var a = document.getElementsByClassName("titular");
console.log(a[0]);
querySelector() y querySelectorAll()
Seleccionar elementos relacionados
Una vez seleccionado un elemento, es posible seleccionar otros elementos que están "en contacto" con ese mismo, el texto del propio elemento, etc.El elemento que seleccionamos es en realidad un objeto del DOM que tiene una serie de propiedades, entre ellas las siguientes:
- parentNode: esta propiedad tiene como valor el elemento precedente en la jerarquía.
HTML: <p>Lorem ipsum <span id="prueba">dolor</span> sit</p>
JS:
var a = document.getElementById("prueba");
console.log(a.parentNode);
Este ejemplo muestra en consola el elemento padre del elemento con "id" igual a "prueba", o sea el elemento "<p>".
- childNodes: recupera los elementos hijos (jerarquía) del elemento seleccionado.
- firstChild: recupera el primero de los hijos (jerarquía) del elemento seleccionado.
- lastChild: recupera el último de los hijos (jerarquía) del elemento seleccionado.
- nextSibling: recupera el siguiente elemento al elemento seleccionado.
- previousSibling: recupera el elemento anterior al elemento seleccionado.
JS:
var a = document.getElementById("prueba").childNodes[0].childNodes;
Manipular los atributos de los elementos HTML
Con JS podemos recuperar, modificar y eliminar el valor de los atributos de un elemento HTML.Recuperar el valor de un atributo
Ejem:
HTML: <span id="prueba">dolor</span>
JS: var a = document.getElementById("prueba").id;
console.log(a);
Este ejemplo muestra en consola el valor del atributo "id" del elemento "span", o sea "prueba".
Modificar el valor de un atributo
HTML: <span id="prueba">dolor</span>
JS:
var a = document.getElementById("prueba").setAttribute("id", "hola");
console.log(a);
Si ahora comprobamos el valor del atributo "id" veremos que ha cambiado a "hola".
Eliminar atributos
HTML: <span id="prueba">dolor</span>
JS:
var a = document.getElementById("prueba").removeAttribute("id");
console.log(a);
Si ahora comprobamos el elemento <span> veremos que el atributo "id" ha desaparecido.
Manipular el texto de un elemento HTML
Recuperar el texto de un elemento.Es posible recuperar el texto de un elemento a través de la propiedad "textContent".
HTML: <h1 id="prueba">Lorem ipsum</h1>
JS: var a = document.getElementById("prueba").textContent;
console.log(a);
Tras ejecutar el código anterior, en la consola del navegador aparecerá el texto "Lorem ipsum".
Modificar/eliminar el texto de un elemento
HTML: <h1 id="prueba">Lorem ipsum</h1>
JS:
document.getElementById("prueba").textContent = "Dolor sit amet";
Tras ejecutar el código anterior, el texto del encabezado "h1" que aparece en el navegador, será "Dolor sit amet".
Si quisiesemos eliminar el texto en vez de modificarlo, a la derecha del signo "=" pondremos una cadena de caracteres vacía.
Ejercicio: crear un elemento <p> con texto en su interior, y modificarlo a través de la propiedad "textContent".
Cambiar los estilos CSS de los elementos HTML
Recuperar el valor de una propiedad CSSHTML: <span id="prueba" style="color: blue">dolor</span>
JS: var a = document.getElementById("prueba").style.color;
console.log(a);
En el anterior ejemplo se recupera el valor de la propiedad "color" del elemento "h1". Esta manera de recuperar el valor, solo funciona si la declaración se ha realizado a través del atributo "style".
Si la declaración de la propiedad y el valor CSS se ha realizado dentro de las etiquetas <style></style> o en una archivo .css aparte, recuperaremos el valor de la propiedad a través del método getComputedStyle:
HTML: <span id="prueba">dolor</span>
CSS: #prueba { color: blue }
JS:
var a = document.getElementById("prueba");
var b = getComputedStyle(a).color;
console.log(b);
En el anterior ejemplo, "b" valdrá "blue".
Ejercicio: recupera el valor del color de fondo (background-color) de un elemento.
Cambiar el valor de la propiedad CSS
HTML: <span id="prueba">dolor</span>
JS: document.getElementById("prueba").style.color = "blue";
El anterior ejemplo cambia el color del texto del elemento con "id" igual a "prueba".
En el caso de que en vez de "blue", dejemos un espacio en blanco, eliminaremos el valor de la propiedad "color".
Crear, insertar y añadir elementos HTML
Crear un elementoJS: var a = document.createElement("p");
console.log(a);
En la anteriores sentencias, hemos creado un elemento "p". El elemento se crea pero no se inserta en el documento. Veamos a continuación como insertar el elemento en el documento.
Insertar un elemento al final (dentro de un elemento)
JS: var a = document.createElement("p");
var body = document.getElementsByTagName("body");
body[0].appendChild(a);
Insertar un elemento antes de otro elemento (dentro de un elemento)
JS: var a = document.createElement("p");
var body = document.getElementsByTagName("body");
body[0].insertBefore(a, antes de este elemento se insertará el nuevo elemento).
Eliminar un elemento (hijo)
HTML: <ul><li>Item 1</li><li>Item 2</li></ul>
JS:
var lista = document.getElementsByTagName("ul");
lista[0].removeChild(lista[0].childNodes[0]).
var lista = document.getElementsByTagName("ul");
lista[0].removeChild(lista[0].childNodes[0]).
---------------------------
Ejercicio: crear una lista <ul> a partir de los elementos de un array.
Ejercicio: suma los valores que aparezcan en un conjunto de inputs.
Comentarios
Publicar un comentario