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