Acceder y modificar una web con javascript

Acceder y modificar una web con javascript

Print Friendly, PDF & Email
Acceder y modificar una web con javascript
Valora esta entrada
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!

Entradas relacionadas:

Resumen de como comentar código en html, css y javascript
- 318
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Como modificar el destino de todos los enlaces de una web con javascript
- 91
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Javascript: Estructura básica de un script
- 801
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Estructura condicional switch en Javascript
- 554
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
Como llamar nodos del DOM mediante javascript
- 382
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Ejercicio – Generación de una fecha personalizada mediante javascript
- 65
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio – Escribir un texto almacenado en una variable
- 62
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Métodos javascript
- 260
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Ejercicio – Acoplamiento de javascript en un documento web
- 142
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio – Sumas con letras
- 104
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.