En el escrito de hoy vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web.
Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los metas de la web y entonces consultar, modificar, añadir o eliminar el contenido que queramos.
A mi modo de ver esta es una de las partes más bonitas y agradecidas durante el proceso de aprendizaje de JS.
Así que manos a la obra.
Resumen de contenidos de esta publicación
- identificar un nodo
- como es un nodo
- como acceder al contenido de las etiquetas HTML
- como modificar el contenido de las etiquetas
- como acceder a los atributos de las etiquetas html con javascript
- como modificar los valores de los atributos de las etiquetas html
Identificar un nodo
Voy a suponer que has aprendido CSS y que ya eres capaz de identificar los nodos de un documento web a partir de cualquier característica de las etiquetas.
“todas las etiquetas del documento web de tipo párrafo”.
“todas las etiquetas del documento que lleven una clase de nombre X” .
“la única etiqueta del documento que lleve el identificador Y”.
Ten en cuenta que lo que hasta ahora se han llamado etiquetas ahora han pasado a ser elementos o nodos.
¡La buena noticia es que todo lo que hayas aprendido de CSS te va a servir en gran parte también para Javascript!
Si combinamos los selectores CSS con los métodos JavaScript para identificar nodos. Por ejemplo los métodos querySelectorAll o getElementById entonces ya somos capaces de identificar inequívocamente un nodo o array de nodos.[button target=»_self» hover_type=»default» text=»Profundizar un poco más» link=»https://francescricart.com/como-llamar-nodos-del-dom-mediante-javascript/»]El paso siguiente será almacenar el/los nodos llamados en una variable para empezar a hacer cosas más divertidas.
Como es un nodo
Recordemos que un nodo es el resultado de
nodo = elemento + atributos + contenido anidado
Y que por los tanto tendremos formas de acceder y modificar el elemento, los atributos que los acompañen y también el contenido anidado.
Como acceder al contenido de las etiquetas html
Existen 2 métodos típicamente usados para acceder al contenido de un nodo.
elemento.innerHTML
elemento.textContent
¿Pero que entendemos por contenido de una etiqueta html?
Cuando definimos el DOM (enlace) acordaros que dijimos que el contenido de una etiqueta HTML era todo el html anidado en su interior.
Por ejemplo para
<p>soy un nodo <span>encantador</span></p>
el contenido del elemento <p> es
soy un nodo <span>encantador</span>
y el contenido para el elemento <span> es
encantador
la diferencia entre elemento.innerHTML y elemento.textContent es que el método innerHTML devuelve el texto anidado con las etiquetas html en caso de haberlas mientras que textContent omite cualquier etiqueta html en caso de haberla y que devuelve el texto plano. Devolvería directamente
soy un nodo encantador
Como modificar al contenido de las etiquetas
Una vez hemos identificado un nodo y hemos accedido a su contenido la forma más fácil de modificar su contenido es mediante una asignación.
Lo más fácil es ver un ejemplo.
Dado un documento generado con un único párrafo
var textoAnidado = document.getElementsByTagName(«p»)[0].innerHTML
devuelve
«soy un nodo <span>encantador</span>»
entonces
textoAnidado.innerHTML = «soy un nodo <span>estupendo</span>»
substituiría el contenido original por el que nosotros hemos puesto.
Como acceder los atributos de las etiquetas html con javascript
Recordemos como era un objeto.
En un objeto definíamos una serie de propiedades y a cada una de ellas le dábamos un valor.
Por ejemplo el objeto persona y almacenábamos un nombre, un apellido, un teléfono, la función de envejecer… lo que fuera de interés.
Pues bien, con los nodos podemos hacer prácticamente lo mismo.
Imaginemos cada uno de los atributos que acompañan a una etiqueta son en realidad como una propiedad de un objeto.
Me estoy refiriendo a los atributos
- src
- alt
- href
- title
- className (en javascript la palabra class es una palabra reservada y para referinos a la clase de CSS debemos usar la palabra className)
- id
- value
- style (¡si! ¡CSS en línea con el html aunque no sea del agrado de los motores de búsqueda!)
- y un montón de atributos más como por ejemplo los que podemos encontrar en los formularios html.
Haciendo el símil al de un objeto será entonces muy fácil de entender como podemos acceder a los diversos atributos. Escribiremos:
- elemento.value
- elemento.src
- elemento.className
- etc
y nos devolverán el valor que contengan.
Como modificar los valores de los atributos de las etiquetas html
La estrategia más fácil para modificar los valores contenidos es la de la asignación.
Por ejemplo
elemento.className = «negrita».
Sin embargo, existe .setAtribute que nos permite hacer lo mismo de un modo mucho más elegante.
elemento.setAtribute(«class»,»negrita»)
elemento.setAttribute(«src»,»img/foto.png»)
Una instrucción que me gusta especialmente es
elemento.style.paddingTop = «10px»;
elemento.style.position = «absolute»;
Fijaros que style es en realidad a su vez como una especie de objeto que puede venir acompañado de prácticamente todas las propiedades CSS de una caja. Las normas son
- No existen los guiones.
- Las propiedades con 2 o más palabras se juntan en una sola que sigue la notación camelcase.
Y hasta aquí una entrada extensa en la que hemos repasado muchos conceptos importantes del DOM pero que a la vez ha sido bastante resumida.
Espero que os pueda ser de utilidad.
¡Hasta mañana!
Deja una respuesta