Estoy de vuelta con mi página web sobre perros, y estoy determinada a usar JavaScript
y la API de DOM para cambiar esta página a una que sea completamente sobre gatos.
Y hay un gran problema que había ignorado. Bueno, en realidad hay un problema llamado
perro, bueno de hecho hay dos perros: las imágenes. No puedo tener imágenes
de estos perros adorables en mi página de gatos adorables. Y necesito cambiarlas.
Así que voy a empezar por encontrar esas imágenes usando "getElementsByTagName".
'var imageEls = document.getElementsByTagName("img");'
Ahora, como eso me regresa múltiples elementos,
necesito usar un ciclo "for" para acceder a sus elementos, así que voy a empezar.
"var i=0; i
Ok. ¿Pero qué voy a poner dentro de este ciclo "for"? No puedo cambiar elementos tipo imagen con
"innerHTML" porque las etiquetas de imagen no tienen "innerHTML". Son etiquetas que se cierran solas.
En su lugar, necesito cambiar lo que hace que haya perros en la imagen,
la URL de las fotografías, lo que está especificado
en el atributo "src" en cada una de las etiquetas.
Podemos cambiar los atributos de los elementos usando notación de punto. Déjenme mostrarles cómo.
En primer lugar, accedemos al elemento actual con notación de corchetes, y luego escribimos punto,
y ponemos el nombre del atributo de HTML como el nombre de la propiedad de JavaScript, "src", igual...
y luego le asignamos un nuevo valor; y puedo poner una cadena de caracteres vacía.
Fíjense que las imágenes desaparecieron,
porque una cadena de caracteres vacía no apunta a ninguna imagen.
Para descubrir cuál debería ser esta nueva URL, voy a pegar la URL anterior aquí,
y cambiar el nombre del archivo por "cat", porque yo sé
que ésa es la URL de la imagen de un gato en Khan Academy.
¡Sí! Los perros ahora son gatos, y nuestra "gatificación" está casi completa.
¿Ves algo más que todavía tiene que ver con perros? Es muy sutil pero,
queda una cosa, el enlace a Wikipedia. El enlace se va a la página de perros,
y si el usuario sigue el enlace, va a descubrir mi trampa.
Así que quiero mandarlo a la página de gatos. ¿Cómo encuentro ese enlace en JavaScript?
Podría asignarle a este enlace un "Id" y usar "getElementById".
O podría usar "getElementsByTagName" y cambiar todos los enlaces en la página.
O podría hacer algo fantástico y
encontrar sólo los enlaces que lleven a páginas sobre perros, usando un selector de consulta de CSS.
Déjame mostrarte la consulta de CSS que quiero hacer primero aquí en la etiqueta "".
Entonces, esta consulta de CSS va a encontrar todos los enlaces que tengan algo que ver con perros.
Primero voy a teclear "a", porque estoy buscando enlaces.
Luego voy a escribir: '[href*="Dog"]'.
Así que esto le dice a CSS que encuentre cualquier enlace que contenga "Dogs".
Y luego le vamos a asignar el color morado. ¡Tan tan!, lo seleccionó.
Esto está muy bien, éste es un selector de atributos, y hay muchas
maneras ordenadas de usar selectores de atributos para ir a lo más profundo en tu documento.
Así que ahora para encontrar eso en JavaScript, podemos usar "document.querySelectorAll", y escribimos:
"var linkEls = document.querySelectorAll", y luego podemos pegar simplemente
el selector que acabamos de hacer, aunque tenemos que asegurarnos
de que tenemos comillas dobles. Aquí están. Así que ahora esto se ve como una cadena de caracteres correcta.
Y ahora necesito hacer las iteraciones, así que una vez más hacemos un ciclo "for",
deberíamos estar muy familiarizados con este ciclo "for", y para cada elemento
quiero cambiar el enlace a la página web de gatos en Wikipedia.
Así que voy a escribir "linkEls[i].href"
porque ese es el nombre del atributo que estamos cambiando, luego escribo igual a...
y luego voy a encontrar esta URL y la pego aquí abajo y sólo le cambio aquí a "Cat",
porque estoy segura de que ésta es la URL de esa página.
¡Tan tan! La "gatificación" del mundo está completada. Pero tú no has terminado
de aprender cómo manipular páginas web con JavaScript, así que continúa por aquí.