Acceder y modificar una web con javascript

Acceder y modificar una web con javascript

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.

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.

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.

nodo y objeto javascript

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.