Sección 2: DOM

Lección 2: Selectores del DOM

Bienvenidos de nuevo. En la lección anterior hablamos acerca del DOM (Modelo de Objetos del Documento), y quizás nos preguntamos algo. Cuando mostramos el objeto window vemos que posee propiedades y métodos.

Pero cuando accedemos al DOM, el objeto document no luce como un objeto.

Vemos que el DOM luce como un documento HTML. Esto se debe a que los navegadores web ocultan el hecho de que el DOM es un objeto de JavaScript.

Con el DOM podemos usar selectores para seleccionar diferentes elementos para poder manipularlos. En esta lección vamos a ver algunos de ellos, los de uso más frecuente.

Para este ejemplo hemos creado un archivo HTML con un listado de cosas para comprar.

El primer selector que vamos a ver es getElementsByTagName. Su traducción se podría leer como obtener elementos por el nombre de la etiqueta. Por ejemplo si queremos seleccionar todos los elementos con la etiqueta h1 debemos ejecutar la siguiente sentencia:

Como podemos ver, obtenemos un arreglo con todos los elementos de nuestra página que poseen la etiqueta h1.

También podemos obtener todos los elementos que poseen un nombre de clase específico.

Siguiendo con nuestro ejemplo, intentemos obtener todos los elementos cuyo nombre de clase sea la palabra "titulo".

Podemos obtener también los elementos por su id.

Vemos que con en esta sentencia no obtenemos un array, ya que no podemos tener más de un elemento con un mismo id.

Para tener acceso a un elemento en particular, en caso de que el valor retornado sea un array, debemos añadir entre corchetes el valor del índice del elemento que queremos obtener, por ejemplo:

Los tres selectores que hemos visto hasta aquí son muy útiles, pero existe una mejor alternativa, las sentencias querySelector y querySelectorAll, las cuales son selectores que se ejecutan a través de una query (consulta) personalizada.

Con estos selectores podemos seleccionar elementos de la manera que lo hacíamos con CSS. Veamos algunos ejemplos.

Como vemos querySelector nos retorna el primer elemento. Si queremos obtener un array con todos los elementos debemos utilizar querySelectorAll.

Veamos si realmente podemos usar selectores como lo hacíamos en CSS. Intentemos seleccionar los elementos li y h1.

Vemos que la sentencia se ejecutar perfectamente. Una cuestión a destacar es que se muestra primero la etiqueta h1 ya que se encuentra definida antes que las etiquetas li dentro del DOM.

Una cuestión que debemos tener en cuenta es la compatibilidad con los navegadores web. Corroboremos esto en www.caniuse.com

Vemos que ambas sentencias son totalmente compatibles con todos los navegadores web.

Ahora veamos qué podemos hacer con los atributos de nuestros elementos. Para obtener atributos usamos el método getAttribute. Probemos donde podemos usarlo. Veamos primero si podemos usarlo directamente en el objeto document.

Como vemos, no podemos llamar al método getAttribute() directamente desde el objeto document. ¿Por qué ocurre esto? Porque los atributos pertenecen a los elementos del DOM, y por lo tanto debemos seleccionar un elemento para luego obtener sus atributos.

En nuestro ejemplo vemos que el primer elemento a posee un atributo href con un valor de "http://www.google.com".

Para seleccionar este elemento a debemos ejecutar la siguiente sentencia:

Ahora, para obtener el valor del atributo href debemos ejecutar la siguiente sentencia:

Con el método getAttribute podemos obtener el valor del atributo de cualquier elemento, por ejemplo el ancho (width) o el alto (height) de una imagen. Así como obtenemos los valores de los atributos, también podemos establecer nuevos valores a estos.

Vemos como el valor del atributo href cambió de "http://www.google.com" a "https://www.facebook.com".

¿Podemos tener una clase para cambiar un estilo o CSS? Por supuesto que podemos. Gracias al DOM podemos modificar todo lo que vemos en nuestros sitios web.

Para hacer esto, primero creemos un archivo CSS como el siguiente:

Ahora utilicemos la propiedad className para indicar el nombre de la clase de nuestro archivo CSS que dará formato a nuestro elemento h1.

Vemos cómo se añadió la clase fondoAmarillo a nuestro h1.

Existe otra forma de hacerlo, y es hacerlo a través del atributo classList. Este atributo nos permite obtener un listado de clases, lo cual nos resulta muy útil en aquellos casos en los cuales los elementos poseen definida más de una clase. Probemos en nuestro ejemplo, ejecutar la siguiente sentencia:

Como vemos, la sentencia classList nos devuelve un array el cual en este caso no contiene elemento alguno. Probemos ahora añadir clase fuenteSesenta a nuestro elemento h1.

Como podemos ver, en este caso el array que nos retorna classList posee dos clases.

Este atributo classList en realidad es un objeto, el cual contiene algunos métodos, tales como add (añadir), remove (remover) y toggle (cambiar su valor).

Ya utilizamos el método add para añadir una clase a classList.

Ahora probemos remover este estilo utilizando el método remove.

Vemos como se ha removido el estilo antes aplicado.

Ahora probemos añadir nuevamente el estilo removido.

Ahora probemos el método toggle. Intentemos aplicarlo al estilo fondoAmarillo.

Vemos como al ejecutar toggle este estilo ha pasado de estar activado a estar desactivado. Ahora probemos ejecutar nuevamente el método toggle a este estilo.

Vemos en este caso como el estilo ha pasado de estar desactivado a volver a estar activado. El método toggle cambia el estado de activado a desactivado, y de desactivado a activado, dependiendo de cual sea su estado actual.

Ahora veamos si classList está disponible en todos los navegadores web. Para ello, ingresemos a www.caniuse.com y corroboremos esto.

Como podemos ver, classList tiene soporte parcial en Internet Explorer y Opera Mini. En todos los demás navegadores no tendremos ningún problema de utilizarlo.

Ahora veremos otra forma de poder modificar nuestro código HTML a través de código JavaScript. La forma que veremos se conoce como innerHTML, HTML interno, la cual no es para nada recomendable de usar, pero la veremos a que existen mucho código en Internet que hace uso de ella. Veamos a continuación cómo usar esta sentencia para modificar el código de nuestro primer elemento h1.

Vemos que el resultado de esta sentencia modifica completamente la salida de nuestro h1. Si vemos el código de nuestro h1, seleccionando a través de un querySelector, vemos cómo estos cambios han quedado plasmados en nuestro DOM.

Es recomendable no usar innerHTML, pero como mencionamos antes, es importante conocerlo debido a que podríamos toparnos con código que lo use.

A través del DOM también podemos acceder a algo llamado elemento padre y elementos hijos. Al elemento padre se lo conoce como parentElement, y cada elemento puede tener un solo padre. A los elementos hijos se los conoce como children, y un elemento puede tener más de un hijo.

Veamos cómo funcionan. Para ello, seleccionemos el segundo elemento de nuestro listado, y añadamos separados por un punto parentElement, la cual es una propiedad de cada elemento de nuestro DOM.

Vemos que como resultado obtenemos un elemento ul, el cual en nuestro DOM es el elemento padre de todo elemento de la lista. Ahora si ejecutamos nuevamente parentElement, pero en este caso en el elemento ul, vemos que su padre es el elemento body.

Ahora veamos cuales son los hijos de nuestro elemento body, para ello ejecutaremos la siguiente sentencia:

Como vemos, nuestro elemento body posee cuatro hijos: un encabezado h1, una enlace, un párrafo, y una lista ul. Todos estos elementos son retornados en un array.

Algo importante a saber es que podemos utilizar variables para almacenar los elementos seleccionados del DOM. Esto nos permitirá acceder a estos elementos sin necesidad de que nuestro navegador web recorra el DOM buscándolos cada vez que tengamos que usarlos.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!