-
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í.
