Bien, bienvenido de nuevo.
Entonces este video va a ser un poco diferente.
No introduciremos nuevas formas de manipular la dom sino que tomaremos lo que hemos aprendido
y haremos un poco de código.
Entonces vamos a jugar con la página de inicio de Google.
Así que le recomiendo que abra Google o haga esto junto conmigo o hágalo usted mismo después
de ver el video.
Y vamos a hacer algunas cosas divertidas, como cambiar el logo.
Haremos una foto de un gatito esta vez solo para ser justos con todos los amantes de los
gatos que cambiarán todos los enlaces para que sean dot com o algo así.
El único punto que quiero enfatizar en esta lección es que podemos usar un bucle para manipular múltiples
elementos, por lo que no siempre tenemos que seleccionar una cosa y cambiar su color o seleccionar una imagen
y cambiar su fuente.
Podemos seleccionar todas las imágenes y luego recorrer esa lista y cambiar su fuente para cada una.
Así que les mostraré cómo lo haría aquí.
Entonces comenzaremos de manera simple.
Comencemos por seleccionar este logo.
Y una nota lateral rápida si estás en Google en un día en el que tienen un Google Doodle en
lugar de este logotipo normal.
Puede que no sea una imagen aquí.
A veces tienen animaciones sofisticadas o juegos interactivos.
Y en ese caso, podrían ser algo así como un elemento de lienzo.
Entonces, si te encuentras con eso cuando inspecciona Eso está bien, solo puedes mirar esta parte.
pero solo quiero mostrar que puedes hacerlo en el sitio web de cualquiera, así que selecciónalo.
Ya hemos visto cómo cambiar las fuentes de imagen,
Es una imagen y tiene una identificación, por lo que es más fácil.
Logotipo de HP.
Entonces, seleccionemos, vamos a llamarlo, nuestro logo es igual al documento que el selector de consulta
del logotipo de HP.
Y, por supuesto, podríamos haber usado elementos por ID también.
Así que terminamos con Logo igual a eso.
Entonces, ahora hemos seleccionado eso.
Y si queremos cambiar la imagen vamos a cambiar la fuente.
Necesitamos usar set attribute y aquí solo tengo la imagen.
Buen gatito.
Así que voy a tomar este Kidan que eres.
Copiaré eso y voy a actualizar la fuente de este logotipo para hacer eso.
Haga el atributo logo dot set en lugar de miedo.
Vamos a escribir la fuente.
Y el segundo argumento es la nueva fuente y presiono Enter y aparece mi pequeño y simpático gato Roquette.
Puede recibir un mensaje como este.
Dependiendo de la imagen que uses
Entonces, explicaré brevemente qué es esto.
Solo mencionamos que estamos en una página cargada con TTP, como puede ver, que aparece y que la imagen
que establecí como origen en B es H TTP.
Y para hacerlo corto, HTP es más seguro que HGP.
Entonces se queja de que debería ser todo HTP. Sí, no deberíamos usar algo menos seguro.
Esa es una versión realmente simple pero aún nos permite hacerlo.
No es un gran problema para lo que estamos tratando de hacer aquí simplemente jugando con Google.
Sin embargo, es algo que debería considerar si hace algo como esto
en su propia aplicación y entonces sería un problema.
Así que volvamos al contenido aquí.
Se encontró que cambia el ancho y la altura de este gato para que ocupe la misma cantidad de espacio
que el logotipo original de Google.
Veo realmente que la altura era 92 originalmente y con doscientos setenta y dos.
Y eso es lo que está sucediendo aquí.
Puedes ver si quiero cambiar esto. Puedo hacer algo como este punto del estilo del logotipo con y tomar una cadena
y simplemente cambiar eso para que sea de 500 píxeles.
Puedes ver que se extiende y puedo hacer lo mismo.
Cámbialo por mil píxeles.
Consigue un lindo gatito elástico y podemos cambiar el ancho.
Me refiero a la altura y vamos a hacer ese gato 500 o pobre.
Se está estirando por todos lados.
Entonces continuemos y restablezcamos la altura a algo un poco más apropiado.
Vamos a que la altura sea de aproximadamente 100 píxeles y
el ancho sea aproximadamente 200.
De acuerdo, entonces eso nos funcionará por ahora solo para practicar un poco más.
Démosle también un borde alrededor de esa imagen para que el logo de ese borde de estilo sea igual y
haremos un borde de color sólido de dos píxeles y nuestro maravilloso compañero estará alrededor de esa imagen.
OK, así que ahora pasemos a lo que presenté al comienzo del video, que es seleccionar un
grupo de elementos a la vez y usar un bucle para manipularlos en lugar de tener que hacerlo individualmente.
Entonces, lo que vamos a hacer es seleccionar todas las etiquetas de anclaje en la página.
Hay muchos enlaces en esta página.
Vamos a tomar cada uno y cambiar el atributo ref para ir a otro sitio web en lugar de ir a
donde sea.
Entonces, para empezar, necesitamos seleccionar todas las etiquetas de anclaje, así que tenemos muchas maneras de hacerlo.
Voy a llamarlo enlaces son enlaces y haremos documento.
Podríamos hacer una carta de consulta, pero voy a obtener elementos por etiqueta de anclaje de nombre de etiqueta y
si miramos los enlaces, podemos ver que obtenemos bastantes en esta página, así que vamos a recorrer todo esto.
podemos simplemente hacer enlaces. Conjunto de puntos. Atributo que no existe; nos dice que el enlace comienza en el atributo, no es una función.
No
Y eso es porque dicho atributo solo existe en elementos individuales y enlaces.
Es esta colección de nodos.
Así que tengo que recorrerlo como si fuera un bucle a través de cualquier otra matriz como objeto.
Entonces no puedo usar para cada uno porque no es una matriz real.
Entonces necesito usar un bucle for o técnicamente podría usar un ciclo while.
La mayoría de las personas usaría un bucle for.
esa longitud y se agregará 1 y luego dentro del bucle vamos a acceder a cada enlace de enlace individual Hola.
Así que para son iguales cero es menor que los enlaces de
Y comencemos imprimiendo su contenido de texto.
Así que vincula ese contenido de texto y cancelaremos ese registro.
Así que este es un patrón común que recorre un grupo de elementos y hace algo
que tal vez no se imprime en la consola pero que se muestra de alguna manera o cambia algo cambiando el color.
Entonces presionamos enter y puede ver que este es el contenido de texto de todos los enlaces en la página.
Así que te hacemos saber cosas como fotos y traduces Google y Drive play YouTube, todos esos enlaces están en algún lugar de
esta página, lo cual tiene sentido ya que es la página de inicio de Google.
Entonces, en lugar de simplemente imprimir cosas en un golpe, la flecha hacia arriba y volver a este ciclo,
comencemos cambiando el estilo para que podamos ver las longitudes más fácilmente, hagamos que sean de un color diferente
y hagamos que tengan un borde alrededor de ellas. .
Así que voy a deshacerme de mi consola y voy a hacer el estilo de lynx y cambiaremos el fondo
para comenzar y vamos a hacer que sea de color rosa.
Y si presionamos enter, puede ver que cerraré la consola.
Todos los enlaces en la página ahora son de color rosa.
Tengo un fondo que es rosado.
Entonces esto aquí es un enlace.
Todos estos naff son elementos en el botón de inicio de sesión.
También es un enlace.
Entonces, hagamos una cosa más.
Vamos a recorrer nuevamente.
Pulse la flecha hacia arriba y hagamos algunas cosas, hagamos el estilo.
El borde equivale a un píxel y hagamos dasht violeta.
Y en los siguientes enlaces de línea, hago un estilo y cambiemos el color para que sea naranja.
Entonces esos dos presionan enter.
Y puede ver que obtenemos estos enlaces realmente hermosos en nuestra página de fondo rosa, un pequeño borde morado no
solo un borde regular.
Es dasht muy elegante.
Y también recibimos algunos textos en naranja.
Pero si hacemos clic en ellos, puede ver que las trampas aún no han cambiado y que tiene sentido porque no
las hemos cambiado.
Así que quiero cambiarlos a todos para ir a WDW.
Ser punto com necesita ir a la estafa. Y ya tengo mis enlaces seleccionados.
Esta gran colección ya tengo ese bucle escrito, así que voy a reutilizarlo.
Y solo para reiterar que esto es algo que hará mucho.
Así que póngase cómodo si puede escribir estos cuatro bucles donde no podemos usar un para cada uno.
Entonces, tenemos que usar un bucle for.
Hacemos esto todo el tiempo.
Y de aquí en adelante hasta que lleguemos a la consulta de Jey, vamos a escribir mucho este tipo de línea.
Así que vamos a enlaces I.
Y vamos a comenzar, pero solo imprimiremos dónde se va cada luz, así que cancele ese registro.
Y vamos a cancelar ese atributo log get de atra.
Así.
Y técnicamente no necesitamos inventar eso, pero para que sea más fácil de ver.
Y nos falta nuestra impresión de cierre de sesión constante para ver aquí y ahora obtenemos una lista de todos los enlaces y
es interesante que puede ver que algunos de ellos.
Este es el enlace a esta cosa javascript adelante cero o no.
separados o algunos de ellos son rutas relativas como esta aquí y algunas son absolutas como esta aquí.
Así que algunos de ellos están vacíos, no tienen un 8 Tref, algunos de ellos van a sitios web
DE ACUERDO.
Así que vamos a cambiarlos ahora.
Los enlaces de blog de Compton-Rock obtuve el atributo de configuración y no es necesario registrarlo constantemente para establecer el atributo.
Y vamos a cambiarlos para que sea lo que queremos. HGF: queremos que HPF sea W. W. Eso es HTP colon slash slash BW punto Bing punto com así.
Y presionamos enter.
No parece que haya cambiado nada.
Si escribimos enlaces y solo miramos lo que tenemos.
Cada uno ahora pasa a ser punto
com y también podemos inspeccionar uno y podemos verlo en el inspector de elementos. Va a ser punto com.
Y lo último que hacemos para probarlo es hacer clic en uno.
Así que apruebe el botón de inicio de sesión o abandonemos Gmail y verá que se abre para mí.
Para resumir, seleccionamos un conjunto de cosas una colección de enlaces y luego recorremos
esa colección con un ciclo for y luego dentro de ese ciclo podemos
hacer algo con cada elemento individual que luego se repetirá a todos.
20 o 30 longitudes diferentes en esta página.
Así que cambié el color de fondo, el borde, el color de la fuente, cambiamos la referencia y solo tuvimos que escribir algunas líneas y se aplicó a No sé
Entonces ese es un patrón que vamos a usar mucho en los próximos videos.