OK bienvenue de retour.
Donc, cette vidéo va être un peu différente.
Nous n'allons pas introduire de nouvelles manières de manipuler le dom, mais nous allons prendre ce que nous avons appris et faire un peu de code le long.
Nous allons donc jouer avec la page d'accueil de Google.
Donc, je recommande que vous ouvrez Google soit faire cela avec moi ou vous faire cela sur votre propre après que vous regardez la vidéo.
Et nous allons juste faire des choses amusantes comme changer le logo.
Nous allons faire une photo d'un chaton cette fois juste pour être juste à tous les amateurs de chat va changer tous les liens pour qu'ils viennent à être dot com ou quelque chose comme ça.
Le seul point que je veux souligner dans cette leçon est que nous pouvons utiliser une boucle pour manipuler des éléments multiples afin que nous ne devions pas toujours sélectionner une chose et changer sa couleur ou sélectionner une image et changer sa source.
Nous pouvons sélectionner toutes les images, puis parcourir cette liste et changer la source.
Donc je vais vous montrer comment je le ferais ici.
Nous allons donc commencer simple.
Commençons par sélectionner ce logo.
Et une note côté rapide si vous êtes sur Google un jour où ils ont un Doodle de Google au lieu de ce logo régulier.
Ce n'est peut-être pas une image ici.
Parfois, ils ont des animations de fantaisie ou des jeux interactifs.
Et dans ce cas, ils pourraient être quelque chose comme un élément de toile.
Donc, si vous rencontrez que lorsque vous inspectez C'est tout droit, vous pouvez simplement regarder cette partie.
Nous avons déjà vu comment changer les sources d'images, mais je veux juste montrer que vous pouvez le faire sur le site Web de quiconque afin de le sélectionner.
C'est une image et il a une identification de sorte que le rend facile.
Logo de HP.
Alors choisissons que l'on appelle notre logo égal au document que le sélecteur de requête HP logo.
Et bien sûr, nous aurions pu utiliser élément par ID ainsi.
Nous nous retrouvons ainsi avec Logo égal à cela.
Nous avons donc choisi cela.
Et si nous voulons changer l'image, nous allons changer la source.
Nous avons besoin d'utiliser l'attribut set et j'ai juste l'image ici.
Joli chaton
Donc, je vais prendre ce Kidan vous êtes.
Je vais copier cela et je vais mettre à jour la source de ce logo pour le faire.
Do logo attribut set point au lieu de la peur.
Nous allons juste écrire la source.
Et le second argument est la nouvelle source et je frappe entrer et j'obtiens mon petit chat agréable Roquette apparaissent.
Vous pourriez obtenir un message comme celui-ci.
Selon l'image que vous utilisez.
Je vais donc expliquer brièvement ce que c'est.
Il est juste mentionner que nous sommes sur une page chargée de TTP que vous pouvez voir que l'image et que je place la source à B est H TTP.
Et pour le rendre court HTP est plus sûr que HGP.
Donc, il se plaint qu'il devrait être tous HTP Oui, nous ne devrions pas utiliser quelque chose de moins sûr.
C'est une version vraiment simple mais elle nous permet toujours de le faire.
Ce n'est pas un énorme problème pour ce que nous essayons juste de faire ici en jouant avec Google.
C'est quelque chose cependant que vous voudriez considérer si vous faisant quelque chose comme ceci dans votre propre application et ce serait un problème alors.
Revenons donc au contenu ici.
Trouvé de changer la largeur et la hauteur de ce chat de sorte qu'il prend la même quantité d'espace que le logo Google original a fait.
Je peux voir en fait que la hauteur était de 92 à l'origine et avec était deux cent soixante-douze.
C'est ce qui se passe ici.
Vous pouvez voir si je veux changer cela, je peux faire quelque chose comme ce logo dot style dot avec et prend une chaîne et juste changer que d'être de 500 pixels.
Vous pouvez le voir s'étirer et je peux faire la même chose.
Changez-la pour qu'elle soit de mille pixels.
Obtenez un joli étirement kitty et nous pouvons changer la largeur.
Je veux dire la hauteur et faisons que 500 ou pauvre chat.
Il est juste obtenir étiré partout.
Alors allons de l'avant et réinitialiser la hauteur à quelque chose un peu plus approprié.
Let's go pour la hauteur d'environ 100 pixels et la largeur d'environ 200.
Très bien pour que cela fonctionne pour nous pour l'instant juste pour un peu plus de pratique.
Laissez-nous aussi lui donner une bordure autour de cette image afin que le logo que la frontière de style égale et nous ferons une frontière de pourpre de deux pixels et là est notre partenaire merveilleux autour de cette image.
OK maintenant passons à ce que j'ai présenté au début de la vidéo qui sélectionne un tas d'éléments à la fois et en utilisant une boucle pour les manipuler plutôt que d'avoir à le faire individuellement.
Donc, ce que nous allons faire est de sélectionner toutes les balises d'ancrage sur la page.
Il y a beaucoup de liens sur cette page.
Nous allons prendre chacun d'eux et changer l'attribut ref pour aller à un autre site Web plutôt que partout où ils vont.
Donc, pour commencer, nous devons sélectionner toutes les balises d'ancrage de sorte que nous avons un tas de façons de le faire.
Je vais appeler les liens sont des liens et nous allons faire document.
Nous pourrions faire une lettre de requête tous mais je vais faire obtenir des éléments par la balise d'étiquette d'étiquette de nom et si nous regardons des liens que vous pouvez voir que nous obtenons un certain nombre sur cette page ainsi nous allons boucler par ceci.
Nous ne pouvons pas seulement faire des liens ensemble de points attribut qui n'existe pas nous dit lien commence à attribut ce n'est pas une fonction.
Et c'est parce que cet attribut n'existe que sur des éléments et des liens individuels.
Est cette collection de noeuds.
Donc j'ai besoin de boucle à travers elle juste comme je ferais la boucle par n'importe quel autre arrangement comme objet.
Donc, je ne peux pas utiliser pour chacun parce que ce n'est pas un véritable tableau.
J'ai donc besoin d'utiliser une boucle for ou techniquement je pourrais utiliser une boucle while.
La plupart des gens utilisent une boucle for.
Donc, pour sont égaux à zéro est inférieur à des liens que la longueur et ajouter 1 et puis à l'intérieur de la boucle, nous allons accéder à chaque lien de liens individuels Hi.
Commençons par l'impression de son contenu textuel.
Donc, les liens que le contenu du texte et nous allons annuler ce journal que.
Il s'agit donc d'un motif courant en boucle à travers un tas d'éléments et de faire quelque chose peut-être ne pas l'imprimer dans la console, mais l'afficher en quelque sorte ou changer quelque chose en changeant sa couleur.
Nous entrons alors et vous pouvez voir que c'est le contenu textuel de tous les liens sur la page.
Donc, nous vous faire savoir des choses comme des photos et de traduire Google lecteur lecteur plus de YouTube tous ces liens sont quelque part sur cette page qui a du sens vu que c'est la page d'accueil de Google.
Donc, plutôt que d'imprimer les choses en un coup de la flèche vers le haut et revenir à cette boucle et commençons en fait en changeant le style afin que nous puissions voir les longueurs plus facile de les rendre une couleur différente et nous allons leur faire une bordure autour d'eux .
Donc, je vais me débarrasser de ma console que le journal et je vais faire lynx je style et nous allons changer l'arrière-plan pour commencer et nous allons faire que un rose.
Et si nous frappons entrer, vous pouvez voir que je vais fermer la console.
Tous les liens sur la page sont maintenant Rose.
J'ai un fond rose.
Donc cette chose ici est un lien.
Toutes ces naff sont des éléments dans le bouton de connexion.
C'est aussi un lien.
Alors, faisons encore une chose.
Let's boucle à travers encore.
Frappez la flèche vers le haut et faisons quelques choses alors faisons le style.
La bordure est égale à un pixel et nous allons faire daht violet.
Et sur les liens de la ligne suivante je style et nous allons changer la couleur pour être orange.
Donc, ces deux personnes entrent.
Et vous pouvez voir que nous obtenons ces très beaux liens sur notre page rose fond minuscule pourpre frontière non seulement une frontière régulière.
C'est daht très fantaisie.
Et nous obtenons du texte orange aussi.
Mais si nous les cliquons, vous pouvez voir que les pièges n'ont pas encore changé et cela a du sens parce que nous ne les avons pas changés.
Donc, je veux les changer tous pour aller à WDW.
Être dot com doit aller à la con. Et j'ai déjà mes liens sélectionnés.
Cette énorme collection et j'ai déjà cette boucle écrite donc je vais le réutiliser.
Et juste pour répéter ceci est quelque chose qui fera beaucoup.
Donc, obtenez confortable si vous pouvez écrire ces quatre boucles où nous ne pouvons pas utiliser un pour chacun.
Nous devons donc utiliser une boucle for.
Nous le faisons tout le temps.
Et d'ici sur jusqu'à ce que nous arrivions à Jey question, nous allons écrire ce type de ligne beaucoup.
Donc nous allons les liens I.
Et nous allons commencer, mais juste imprimer où chaque lumière va donc annuler ce journal.
Et nous allons annuler ce log d'attribuer l'attribut de atra.
Juste comme ça.
Et nous n'avons pas techniquement besoin d'inventer cela, mais juste pour qu'il soit plus facile pour vous de voir.
Et nous manquons notre clôture constante de clôture pour voir ici et maintenant nous obtenons une liste de tous les liens et il est intéressant que vous pouvez voir que certains d'entre eux.
Celui-ci est le lien vers cette chose javascript forward zéro ou non.
Donc, certains d'entre eux sont juste vides, ils n'ont pas un Tref certains d'entre eux vont à des sites Web distincts ou certains d'entre eux sont des chemins relatifs comme celui-ci ici et certains d'entre eux sont absolus comme celui-ci ici.
D'ACCORD.
Alors changeons-les maintenant.
Compton-Rock blog links J'ai obtenu l'attribut set et nous n'avons pas besoin de constamment le log lui attribut set.
Et nous allons les changer pour être ce que nous voulons HGF nous voulons changer HPF pour être W.W ..
C'est HTP colon slash slash BW point Bing dot com juste comme ça.
Et nous avons frappé entrer.
Ça ne ressemble à rien de changé.
Si nous tapons des liens et nous regardons juste ce que nous avons.
Chacun va maintenant à être dot com et nous pouvons également inspecter un et nous pouvons voir dans l'inspecteur d'élément Il va être dot com.
Et la dernière chose que nous faisons pour le tester est de cliquer sur un.
Nous allons donc rapidement le bouton d'ouverture de session ou quittons Gmail et vous pouvez le voir s'ouvrir pour moi.
Donc, pour résumer, nous avons sélectionné un tas de choses une collection de liens et ensuite nous parcourons cette collection avec une boucle for et puis à l'intérieur de celle pour loop nous pouvons faire quelque chose à chaque élément individuel qui sera alors répété à tous.
Donc, j'ai changé la couleur de fond la frontière la couleur de la police nous avons changé la référence et nous avons seulement eu à écrire quelques lignes et il a été appliqué à je ne sais pas 20 ou 30 longueurs différentes sur cette page.
C'est donc un modèle que nous allons utiliser beaucoup dans les prochaines vidéos.