Nous saluons le retour.
Dans cette vidéo, nous allons passer du temps à parler des différentes façons de sélectionner les éléments en utilisant javascript et la poupée.
Avant de parler des sélecteurs réels, nous devons simplement revoir le document une fois de plus.
Rappelez-vous que notre dortoir entier tous les objets toutes les représentations de nos éléments tous vivent à l'intérieur de cet objet de document.
C'est l'objet de niveau supérieur ou le noeud racine.
Alors vite ouvrons n'importe quelle fenêtre de navigateur.
Je vais utiliser Google et essayez de taper ces quatre lignes.
Ouvrez donc la console et tapez document dot vous êtes l et il nous montre l'URL de la page que nous sommes sur.
Vous pouvez faire des liens point de document et c'est une liste complète de chaque lien unique sur la page.
Chaque étiquette d'ancrage unique que nous pouvons faire document que Vadi et c'est le corps entier avec tous les autres éléments à l'intérieur de celui-ci qui vit dans le corps et nous pouvons faire la tête de point de document.
Nous avons déjà vu cela dans les dernières vidéos.
La raison pour laquelle je vous le montre à nouveau est que tous les sélecteurs de toutes les méthodes que nous allons apprendre aussi vivre dans le document.
Donc, tout ce que nous apprenons dans cette vidéo va commencer par document quelque chose de point.
Alors je vais vous montrer ce que ces somethings sont.
Il y a cinq méthodes principales dont nous allons parler dans cette vidéo.
Ils sont tous incorporés dans le document.
Ils commencent tous par le point du document.
Vous pouvez les voir ici get element par id get éléments par nom de classe get elements par nom de tag queery selector et queery selector.
Tout si vous pouvez penser à la vidéo que j'ai fait sur l'ajout de méthodes à un objet où nous pourrions stocker une fonction comme une valeur au lieu d'un objet.
Nous avions comme espace de chat dans l'espace de chien et nous avons dû parler la méthode que nous avons ajoutée dans notre objet d'espace de chien.
C'est exactement ce qui se passe ici.
Ces cinq méthodes ont toutes été ajoutées à l'objet document.
Donc, avant de commencer ici, je veux vous montrer le courrier H-G que je vais utiliser à des fins de démonstration.
C'est une page très très simple a juste quelques éléments.
Donc, notre tête normale est assez vide à part un titre ou un corps.
Et puis à l'intérieur du corps à H-1 est celui qui dit bonjour.
Un autre qui dit au revoir.
Et puis trois alliés au lieu d'un UL et ces trois alliés liste un élément deux et trois sont légèrement différents.
Le premier a une surbrillance ID et le dernier à avoir une classe appelée en gras.
Donc, nous allons utiliser cela.
Le fait que certains d'entre eux soient H-1, certains des éléments sont des alliés.
Certains ont des classes.
On a un ID.
Nous allons utiliser ces différentes propriétés pour les sélectionner de différentes façons et différentes combinaisons.
Donc j'utilise ce même code ici dans les exemples et je dessine une boîte verte pour que vous puissiez voir dans les diapositives suivantes.
Une boîte verte autour de ce qui est sélectionné.
OK alors commençons avec la première méthode.
Obtenir élément par ID.
Donc, son nom est un peu auto-explicatif.
Il prend un nom d'identification et il va retourner l'un élément qui correspond à cet ID.
Rappelez-vous qu'un ID ne peut se produire qu'une seule fois sur une page.
Voici donc un exemple de document diked get element by ID.
Highlight va sélectionner cet allié qui a l'accent d'identification afin qu'il sélectionne l'objet et alors il nous revient.
Je vais le montrer rapidement au conseil.
Nous allons donc ouvrir la console à un type de document get element by id highlight qui est notre nom d'identification.
Enregistrez-le dans une variable appelée étiquette.
Appuyez sur Entrée.
Et regardons TAG.
Et vous pouvez le voir, il nous donne la première ligne qui a ID égale à mettre en évidence.
Nous avons donc sélectionné quelque chose par une pièce d'identité.
Encore une fois, il nous montre comme si c'est effectivement vieilli bien, mais le résultat de cela est en fait un objet javascript.
Donc nous pouvons faire cela annulé que Diyar encore sur la balise.
Et c'est en fait ce qu'il ressemble.
Toutes ces propriétés.
Donc, ce n'est qu'un bon raccourci pour nous de voir visuellement ce que nous avons sélectionné, mais en réalité, c'est une représentation d'objet.
Très bien, c'est tout ce qu'il faut pour obtenir l'élément par ID.
Nous appelons la méthode que nous passons dans un argument chaîne unique le nom d'un ID que nous voulons et puis il va et trouve l'élément correspondant qui a le même ID et il nous retourne la représentation d'objet.
La prochaine est d'obtenir des éléments par nom de classe de sorte que son nom vous indique exactement ce qu'il fait.
Tout comme get élément par ID.
Bien que ce soit légèrement différent Obtenez des éléments pluriel avec un S par nom de classe.
Rappelez-vous qu'une classe peut se produire autant de fois que nous le voulons sur une page.
Donc nous passons dans une chaîne comme en gras et qui va retourner une liste de tous les éléments sur la page qui ont le nom de la classe correspondante en gras.
Dans ce cas, il ya deux d'entre eux, mais s'il y avait dix mille éléments sur la page qui avait cette classe, nous aurions tous les 10000 dans une liste.
Donc, allons le démontrer, donc le document de taux get élément par nom de classe et vous pouvez voir si nous obtenons cette autocomplétion peu ici afin que nous puissions sélectionner celle que nous voulons obtenir des éléments par nom de classe et puis le nom de classe que nous voulons est en gras.
Enregistrez-le dans une variable.
Les tags ne marquent pas les balises car nous allons récupérer plusieurs balises si nous regardons les balises.
C'est une liste de deux mensonges à la fois avec la classe égale à bolded.
Techniquement, ce n'est pas un tableau.
C'est quelque chose qu'on appelle une liste de nœuds qui est un tableau comme.
J'aime le considérer comme un ensemble léger.
Donc, il est livré avec certaines des choses que vous attendez d'un tableau.
Mais certaines des fonctionnalités les plus avancées sont réellement manquantes.
Ainsi, par exemple, nous pouvons accéder à des éléments comme celui-ci en utilisant un index 0.
Nous pouvons faire des étiquettes à flotter mais nous ne pouvons pas faire un pour chaque point de balises de boucle pour chacun.
Et si je fais cela, ça va me dire que les tags sont pour chacun.
Ce n'est pas une fonction.
Donc c'est parce qu'il n'y a pas foreach défini pour ces listes de nœuds qui est défini pour les tableaux et ce ne sont pas des tableaux.
Et tout comme avec get élément par id, il nous montre cette belle représentation de chaîne, mais dans les coulisses, il est en fait un objet.
Donc, encore une fois pour prouver que vous console point DIR et nous ne tag est zéro.
Et c'est en fait ce grand complexe fou objet avec des tonnes de propriétés.
OK alors nous allons obtenir des éléments par nom de classe.
Il retourne une liste.
Pas tout à fait un tableau.
Et il contient tous les éléments de la page correspondant au nom de classe donné que nous avons fourni.
Ensuite, nous avons get éléments par nom marqué.
Donc, celui-ci fonctionne comme get element par ID ou obtenir des éléments par nom de classe.
Sauf si elle retourne une liste d'éléments qui correspondent à un nom de tag donné comme Ally ou H-1.
Donc, dans ce cas, je suis en cours de document dight obtenir des éléments par le nom de la balise Alhaj qui va revenir à moi une liste des trois alliés qui existent sur cette page.
Donc, encore une fois, démontrons que les balises var sont égales au document qui obtient les éléments par nom de balise et nous allons faire Alhaj en premier et regardons les balises et nous obtenons cette liste pas tout un tableau c'est une liste de noeuds qui a trois alliés et je ne le prouverai pas Pour vous cette fois.
Je suis allé voir le Consul que DJR.
Mais ce sont des objets qu'ils ne sont pas seulement des cordes ou pas.
H tim l ils sont en fait des objets javascript avec toutes ces propriétés.
Je peux donc faire la même chose pour H-1.
Nous allons donc sélectionner tous les h et nous regardons les balises et nous arrivons à h ones et la liste.
Ce n'est pas seulement limité aux balises que nous voyons à l'intérieur du corps.
Je pourrais aussi faire quelque chose comme ça.
Obtenir des éléments par le nom de nom de corps et il va revenir à moi une liste avec un élément le corps à l'intérieur de celui-ci.
Ou je pourrais aussi le faire pour la tête ou l'élément de temps ou le titre ou ce que je veux, mais la partie importante est qu'il renvoie une liste, même s'il ya un seul élément, il retourne toujours une liste.
Donc, pour sélectionner le corps, nous pourrions faire quelque chose comme le document ECOs de corps de var qui obtiennent des éléments par nom de nom de corps et puis juste prendre le premier élément parce qu'il ya seulement un élément dans cette liste.
Et si nous regardons ce corps est nous obtenir cet objet géant que le corps tout entier.
D'ACCORD.
C'est donc Get elements par nom de tag.
Juste pour réitérer vous lui donner un nom de balise comme Ally.
Il va et trouve tous les éléments qui lui correspondent et les retourne tous à vous dans une liste.
Même s'il n'y en a qu'un.
Donc, ici, j'ai un autre exemple de le faire avec un H-1.
Vous pouvez voir qu'il sélectionne les deux H une fois.
Ok, maintenant nous changeons de vitesse un peu.
Nous n'avons plus d'élément get ou d'éléments par quelque chose de syntaxique.
C'est ce qu'on appelle sélecteur queery et sélecteur de requêtes est une méthode plus récente qui n'a pas existé pour tout ce long.
Cela rend notre vie beaucoup plus facile.
Nous pouvons donc l'utiliser pour faire tout ce que nous avons vu avec get element par id get éléments par nom de classe get elements with tag name nous pouvons répliquer tout cela avec le sélecteur de requêtes.
Donc, ce qu'il fait, c'est qu'il faut un sélecteur de style CSSA.
Ainsi, un sélecteur de style CSSA signifie juste n'importe lequel des sélecteurs que nous utiliserions au lieu d'un document CSSA.
Donc, dans cet exemple, je suis de sélectionner quelque chose basé hors de la mise en évidence ID, donc je ne peux pas écrire le mot accent comme je l'ai fait avec get élément par ID, mais je dois faire est d'utiliser la syntaxe CSSA avec le symbole de hachage ou le Octa Thorpe et puis mettre en évidence.
C'est ainsi que vous sélectionnez quelque chose avec le sélecteur de requêtes.
Si vous voulez un ID comme vous le feriez avec C Ss et nous obtenons ce premier allié avec ID égal à mettre en surbrillance.
Avant de passer à la console et de taper cela, je vais vous montrer que nous pouvons faire la même chose avec un nom de classe var tag égal à document que queery point sélecteur plié qui est la façon dont nous allions sélectionner la classe en gras en utilisant C Ss.
Et ce qui est important, c'est qu'il ne nous donne réellement que le premier match.
Donc, même s'il ya deux éléments qui ont en gras en tant que classe, il nous donne seulement le premier et c'est le point du sélecteur.
Il renvoie toujours un élément il ya une autre méthode que nous verrons bientôt qui va retourner tous les éléments qui correspondent.
Ainsi, un sélecteur de requêtes peut également prendre un nom de tag comme nous l'avons ici.
H-1 et il retourne le tout premier H-1.
Ainsi nous pouvons prendre des sélecteurs CSSA que nous écrivons tout le temps et voir SS et nous pouvons utiliser cette syntaxe pour sélectionner des éléments avec le sélecteur de requêtes.
Donc je vais le démontrer ici.
Permettez-moi de clarifier cela et nous allons sélectionner cette première.
H-1.
Donc tout ce que j'ai besoin de faire.
Var H-1 correspond au sélecteur de requête de document H-1.
Et si nous regardons ce qu'est H1 est encore une belle représentation de chaîne mais c'est en fait un objet qui représente tout cet élément.
Donc, à présent, essayons de choisir un document basé sur un ID.
Je vais donc copier cette ligne plutôt que H-1.
Ce sera un allié et plutôt que de sélectionner le premier H-1 sélectionnera le premier élément qui a l'ID de souligner.
Et bien sûr, il n'y a qu'un seul élément parce que c'est un ID bien sûr, c'est seulement un élément qui a cette idée sur une page et nous avons besoin de cela.
Octa Thorgeir.
Sinon, il va chercher un nom de tag appelé highlight qui n'existe pas et H.J. out.
Et si je frappe entrer et regarder Alhaj je obtenir que le premier allié avec l'article de la liste un ID égale à mettre en évidence.
Enfin, faisons la même chose avec une classe.
Donc, j'utilise le CSSA Leichter point plié qui est la façon dont nous sélectionnons une classe et si nous regardons Ally, je obtenir le deuxième allié avec la classe à puce liste article 2.
Il y a donc d'autres choses que nous pouvons choisir.
Il ne s'agit pas seulement d'un nom de tag, d'un ID ou d'une classe.
Ce sont les plus communs mais nous pourrions faire d'autres choses comme celle-ci qui ne fonctionnera pas sur ma page, mais je pourrais sélectionner toutes les balises d'ancrage à l'intérieur d'un allié avec une classe de spécial.
Et c'est un sélecteur C Ss plus long, mais il est valable aux États-Unis.
Donc, toutes les balises d'ancrage ont une classe spéciale qui sont imbriquées à l'intérieur d'un allié et qui est totalement valide.
Encore une fois, je n'ai pas cette mise en place sur ma page.
Donc, si je frappe Enter just going to give me.
Non parce qu'il n'a pas trouvé de correspondance.
Donc, comme je l'ai mentionné Sélecteur Querrey retourne le premier match et c'est tout.
Parfois, il est utile, par exemple, si vous vouliez sélectionner le corps.
Tout ce que j'ai à faire est de dire le corps sélecteur de requête et qui vous donne le corps contrairement à quand j'ai fait document diked obtenir des éléments par le nom du nom du corps.
Ils m'ont donné une liste et ils ont dû demander le premier élément.
Si j'utilise le sélecteur de requêtes je vais juste obtenir le corps tout de suite.
Mais l'alternative est queery sélecteur tous.
Donc, il fonctionne exactement de la même manière.
Il faut un sélecteur C a set mais il retourne tous les éléments correspondants.
Donc, dans ce cas, je suis en utilisant le document que le sélecteur de requête tous les H-1 retourne h une fois ou dans ce cas, j'utilise la classe en gras.
Alors CSSA style.
J'ai besoin de points en gras et cela me donne les deux éléments avec la classe en gras.
Donc, démontrons que dans le con ..
Sélectionnons tous les alliés jusqu'à présent.
Allies égale le document que le sélecteur de requête.
Tous alliés.
Et cela me donnera tous.
Je regarde les alliés.
Vous pouvez voir qu'il a trois alliés.
Une dernière fois, je sais que je suis un disque cassé.
Ce sont des objets.
Ils ne sont pas HMO.
Ce sont des objets javascript qui sont construits à partir du HMO.
Et si je fais la même chose, mais je le fais à la place avec le sélecteur de requête et je touche entrer.
Si je regarde les alliés, ce n'est pas une liste, c'est une seule.
Donc, même chose si je l'ai fait pour une classe.
Alors faisons-le pour la classe en gras.
Nous allons simplement l'appeler en gras et avez-vous document que point de sélecteur de requête en gras.
Et je regarde que c'est juste le premier élément de la liste des articles aussi.
Et si je ne sélecteur de requête tous je puis obtenir une liste avec les deux là-dedans.
Un point de confusion souvent pour mes étudiants est que vous pouvez toujours utiliser le sélecteur de requêtes tous même s'il n'y a qu'un seul élément que vous recherchez.
Ainsi, vous pouvez faire quelque chose comme var ally égale le sélecteur de requête point document.
Tout un ID comme surligné et je regarde Ally et c'est une liste avec un seul élément.
C'est juste assez rare que vous fassiez cela mais cela fonctionnera toujours s'il n'y a qu'un seul match.
Très bien, nous avons couvert beaucoup de terrain dans cette vidéo.
Revenons donc au début et faisons un bref résumé.
Nous avons commencé par parler de la façon dont toutes ces méthodes sont à l'intérieur de l'objet document que nous pouvons sélectionner par ID avec get élément par ID, nous pouvons sélectionner par nom de classe avec get éléments par nom de classe et qui renvoie une liste qui n'est pas réellement un Tableau
C'est ce qu'on appelle une liste de nœuds.
Nous pouvons faire la même chose, mais en utilisant les éléments GET par nom de balise qui renverra également une liste de noeuds basée hors d'un type d'élément que nous sélectionnons par alors nous avons le sélecteur de requête qui est un cric de tous les métiers.
Il renvoie le premier élément correspondant à un sélecteur CSSA donné.
Donc, nous pouvons l'utiliser pour faire tout ce qui obtient élément par nom de classe id et le nom de la balise avons-nous pu lui donner un ID comme nous le faisons ici dans une classe comme nous le faisons ici ou un nom d'élément.
Et puis il ya sélecteur de requête tous qui fonctionne de la même manière, sauf qu'il renvoie une liste qui n'est pas un tableau.
C'est aussi un nœud éclaté avec tous les éléments qui correspondent à un sélecteur donné.
D'accord.