Série modèle d'objet de document 2023 - Partie 3 : Manipuler et traverser le modèle d'objet de document

1. Introduction du cours - Manipuler le DOM: Bienvenue dans un autre cours. Je suis super, super excité. Je pourrais sauter de haut en bas. Merci de rester avec moi. Je suis Clyde, je vais être votre instructeur. Et cette classe est une continuation de l'apprentissage sur le DOM, le modèle d'objet de document. Et maintenant vous savez ce qu'est le DOM, vous savez comment accéder au DOM. Que cette classe est tout au sujet de la manipulation du DOM. Donc souvent, une fois que vous entrez dans le dôme, à l'intérieur de la causalité, ce n'est que les points de départ. L' étape suivante consiste à se déplacer à l'intérieur de la causalité, à l'intérieur du dôme. Et dans l'industrie du développement appelé traversant le DOM. Je vais vous montrer pourquoi les parents, les frères et sœurs, les enfants d'un nœud , comment accéder au DOM et se déplacer à l'intérieur. Il va être fascinant et c'est très, très important choses à savoir parce que souvent dans les applications web, vous voulez être en mesure de permettre à l'utilisateur d'ajouter supprimer certains éléments principaux. Donc, vous devez savoir comment vous déplacer à l'intérieur du DOM, vous devez cibler l'élément correct. Et bien sûr, je parle des utilisateurs qui créent des éléments sur une application Wave. Évidemment, cela signifie que nous devons créer un élément à l'intérieur du DOM. C' est donc ce que ce cours va également couvrir. Ce sera l'IBEC. Croyez-moi, peu importe le niveau de codage ou d'expérience que vous avez. Vous apprendrez quelque chose de nouveau. Et ne vous inquiétez pas si vous n'êtes pas à l'aise avec code que je coderai avec vous. Nous allons faire beaucoup d'exemples ensemble. Tu me connais maintenant. Bref, assez de conversation, assez de graisse, de graisse. J' espère vous voir dans les toutes premières vidéos de conférence. 2. Déménager le mouvement dans le DOM: Allons directement dans ce sujet génial, traversant le DOM. En traversant, je veux dire, comment avons-nous de haut en bas de l'arbre DOM ? Savez-vous comment fonctionnent les structures familiales ? Vous avez des parents, vos parents ont des enfants. Et s'ils en ont plus d'un, ça veut dire que vous avez un frère, excentrique, cetera. Eh bien, il s'avère, afin de comprendre comment traverser le DOM, et tout commence par comprendre comment fonctionnent les structures familiales. Mais bien sûr, ici, nous ne parlons pas de familles littérales. On parle de l'arbre DOM. Cela se trouve juste que toute notre page HTML fonctionne de la même manière. C' est cool ? Et comme nous l'avons vu dans la section précédente ou l'une des sections précédentes, tous les nœuds dans le DOM peuvent être exprimés en tant que parents, enfants et frères et sœurs. Mais qu'est-ce que je veux dire ? Eh bien, regardons ça. Rappelez-vous que ce parent, ce type avec une barbe, un parent de n'importe quel nœud, est juste le nœud qui est placé immédiatement au-dessus. Et quand il s'agit de traverser le DOM, il existe deux méthodes principales que nous pouvons utiliser pour obtenir le nœud parent. La première méthode est le nœud parent. Et la deuxième méthode, nous pouvons utiliser cet élément parent. Ne vous inquiétez pas comment je les utilise, toutes les différences entre eux juste pour l'instant. Pour l'instant, je veux juste que vous preniez un pas en arrière à un niveau élevé pour comprendre ces concepts. Donc c'est notre parent. Tout bon et bien, mais rappelez-vous qu'il avait deux enfants ou qu'est-ce que l'enfant, l'enfant d'un nœud est le nœud immédiatement en dessous. Et ce qui est intéressant ou ce que vous devez savoir, c'est que le programme est souvent référé à nœuds qui sont au-delà d'un niveau d'imbrication en tant que descendants. C' est juste la terminologie que vous entendrez dans le monde de la programmation et cela a un sens intuitif. Donc, ce sont vos enfants. Mais qu'en est-il si on regarde des enfants au sein d'une famille ? Eh bien, nous savons que c'est maintenant appelé frères et sœurs. Frère d'un noeud est un noeud du même niveau d'arborescence que ce noeud particulier. Et ce qui est intéressant, c'est que les nœuds frères et sœurs n'ont pas à être du même temps. Ce que je veux dire, eh bien, ça veut juste dire qu'on peut avoir différents types de noeuds. Nous pouvons avoir des notes engagées, prend des nœuds, 11 nœuds. Tout cela peut être des frères et sœurs, il n'est pas nécessaire de l'être en même temps. Donc là, vous l'avez. Ce sont trois types de nœuds que nous avons dans n'importe quel arbre DOM de la famille. Nous avons des paranoïdes, nous avons des nœuds enfants, et nous avons des nœuds frères et sœurs. Ce n'est pas si difficile conduit comment peering Fahrenheit, cela devient plus intuitif. Ainsi, LET commencer à entrer dans plus de détails maintenant. Et le codage de la pensée honnête aussi. Rendez-vous à la prochaine conférence. 3. Créer notre page: D' accord. Tu me connais ? Tu sais à quel point j'aime le codage et c'est pour ça que je veux qu'on y saute fait craquer. Tout ce que je veux faire maintenant pour comprendre comment traverser le DOM, je veux nous mettre en place un joli modèle de travail, un peu cool. La base. Sur la gauche, j'ai mon code Visual Studio sur la droite, vous pouvez voir que j'ai réellement notre navigateur. Donc, vous pouvez voir la rigidité fait des progrès que nous faisons sur l'intimidation sont page simple. Ça va être très simple, prometteur. Donc c'est la base. Je veux juste créer un gabarit HTML5. C' est cool. Je vais titre de ce document et parcourir le DOM parce que c'est exactement ce que nous faisons. Je suis sortie pour être très simple. Donc, la première chose est que je veux louer du code dans une balise principale et dans cette balise principale. Et quand j'ai une balise H1 qui dit bienvenue, ils ne veulent pas empiéter sur une balise div en dessous de cela. C' est en fait avoir une idée de Rapa. Et dans cette balise div, ayons une balise H2 avec des griffes de sub, frappant la balise MSH2 et disons simplement traverser le DOM. Très simple. Sauvez-le. Bienvenue. traversant le DOM sous le H2, allons avoir une balise de paragraphe disant, nous allons avoir une balise de paragraphe disant, comment le faire ? Et en dessous de la balise de paragraphe, nous pouvons avoir une autre balise de paragraphe qui dit, rester autour. Et je vais te montrer. Et si nous économisons, là nous allons et mises à jour dans notre navigateur. Et il le fait parce que j'utilise Live Server. Je l'ai déjà traversé, mais si vous avez des questions, postez-les sur Cunei, expliquez comment ça marche. Donc, ces offres div tag et je suis juste pose automobile, prendre avec moi et puis nous mourrons. Et je suis allé au filet pour être un deuxième emballage. Et dans cette balise div, faisons juste une blague du jour. Donc on peut même avoir un cours appelé imbécile. Et on peut dire branler la journée. Et le travail peut être, par exemple, comment appelez-vous du poisson sans yeux ? Et la réponse est le poisson. Et pas une très bonne blague. Mais ce n'est pas le but de cet exercice. Refroidir ou glace. Maintenant, nous avons nos sites de base. Un que je veux faire est un guide rapide vers le haut ici et ajouter peu de CSS très rapide sous le titre UCC, Ajoutons juste une balise de style. Et oui, avec tous les éléments sur notre page, Commençons à coiffer. Tout d'abord, je veux que tous les éléments aient une frontière. Disons simplement que si deux pixels de largeur, il peut être une bordure solide et il peut être une belle sorte de cool il bordure grisâtre. Alors, voilà. J'ai enregistré comme vous pouvez le voir, quoi cela ressemble à l'écran, n'a pas l'air correct, n'est-ce pas ? Ça va se faire enchérir. Maintenant, je veux juste ajouter un peu de remplissage pour définir un remplissage de 15 pixels sur une marge de 15 pixels. Voyons à quoi ça ressemble maintenant. En regardant, je cherche enchérir à mon hébergement un peu de CS supplémentaires. L' Islam peut rendre votre page impressionnante. C'est plutôt cool. Et ce style juste le corps. Maintenant, on peut lui donner un mélange. Et si je ne connais pas 600 pixels ? On peut changer la famille de polices. Ont-ils du san-serif, l'intestin ? Ça a l'air un peu mieux. Et nous allons juste changer une optique de couleur et juste espacer un peu. Alors on y va. C' est notre page. C' était facile ? Je t'ai dit que je ne serais pas difficile. Et si nous nous débarrassons de notre code et nous regardons simplement notre navigateur, nous y voilà. Nous avons différents éléments, différentes sections, nous avons des emballages. Et c'est pour ça que je veux mettre des frontières ici. Parce que je voulais que tu vois ce qui définit un élément du suivant. Mais on va s'en occuper, ne t'inquiète pas, Kate. Je voulais juste coder ça avec toi. J' espère que vous pouvez lire avec moi et comment vous amuser, Il ya juste quelque chose que je veux mentionner rapidement avant de passer à autre chose. C' est sauter à l'autre écran. 4. Pourquoi nous devons traverser le DOM ?: Je sais que nous avons déjà vécu ça, mais je veux juste insister rapidement sur les États-Unis parce que c'est si important. Tout d'abord, l'API DOM nous permet de faire n'importe quoi sur les éléments et le contenu. Et nous le faisons généralement via JavaScript. Nous savons que nous avons d'abord besoin d'un moyen d'atteindre le nœud DOM correspondant. Ce sont des routes évidentes pour que nous puissions y faire quoi que ce soit, nous avons besoin d'un moyen d'y accéder. Et dans les sections précédentes, nous avons discuté de la façon dont nous pouvons utiliser l'API DOM pour accéder à certains éléments HTML. Oui, nous utilisons l'ID, l'API select, cette clause, le nom de la balise. C' était amusant et il était intuitif et vous avez en fait la plupart de ces bananes. Bien que nous ayons appris ces méthodes d'accès, n'est malheureusement pas tout à fait suffisant. Il nous faut un peu plus. On a besoin de la cerise sur le dessus. Nous avons appris que le DOM est structuré comme un arbre de nœuds, non ? On a vu ça. Et en gardant à l'esprit que le DOM est structuré comme un arbre de nœuds. Nous voulons souvent effectuer des actions sur des éléments, pas nécessairement selon l'ID ou le nom de la classe ou de la balise, mais qui ont des relations les uns avec les autres. Et le mot clé ici, bien sûr, c'est les relations. Pour ce faire, nous avons besoin d'un moyen de passer d'un nœud à un autre nœud. En d'autres termes, nous avons besoin d'un moyen de traverser le DOM. Et c'est ce qu'est cette section entière. Alors asseyez-vous, prenez un café et allons y aller. 5. Les 3 objets les plus importants: Avant d'aller plus loin, Il y a juste quelque chose que je veux vous signaler ce qui est le plus important lorsque vous traitez avec le DOM et vous le savez probablement déjà. Je veux juste le souligner à nouveau parce que nous allons entrer dans beaucoup plus de détails et beaucoup plus avancés dans les prochaines sections et faire juste Christie, regardons les deux premières lignes de code R. Laissez-moi juste zoomer là si nous pouvons vous voir ces deux lignes seront d'abord nous avons ce doctype, et ensuite nous avons cette balise HTML, une tête. Nous pouvons prendre ces deux premières lignes et la combiner avec le roi de notre navigateur entier. Nous pouvons ensuite diviser cela en trois choses les plus importantes quand il s'agit du DOM et a besoin de trois choses sur l'objet fenêtre, le document et le HTML. Et nous avons vu beaucoup de choses avant, mais si nous allons à notre navigateur et nous accédons à la console, encore une fois, laissez-moi juste zoomer ici pour vous. Ce qu'on peut faire, c'est faire des choses comme ça. Si nous nous sentons vraiment si inclinés, nous pouvons définir une variable appelée objet de fenêtre global. Et nous pouvons en faire un signe à la fenêtre de valeur. Et puis bien sûr, nous pouvons accéder à cet objet de fenêtre global comme ça. Et nous pouvons l'ouvrir et nous pouvons voir toutes les propriétés de la fenêtre. On le sait, on l'a vu, on l'a vu. Mais c'est très bizarre qu'on l'assigne à une variable, n'est-ce pas ? Et la même chose qu'on pourrait faire avec un document, on pourrait l'appeler mode document adénoïde. Nous pourrions attribuer cela avec le lieu du document. C' est très étrange, n'est-ce pas ? Nous ne faisons jamais cet encodage. Et la raison pour laquelle nous n'avons pas à le faire est cause de notre importante fenêtre et le document est le DOM nous fournit un accès facile à eux par fenêtre et document. Ceux-ci sont connus dans l'industrie de la programmation sous le nom de mélodies mondiales. Donc ça veut juste dire qu'on n'a pas à les déclarer explicitement, comme je viens de le faire. Vous pouvez simplement le secouer et l'utiliser directement hors du récipient. Donc, nous pouvons en fait juste fenêtre lumineuse. Et nous avons accès aux propriétés de la fenêtre. Nous pouvons écrire un document et nous avons accès aux propriétés du document. Qu' en est-il de ça ? Html ? Laissez assez facile à obtenir aussi. Nous pouvons simplement dire que HTML, élément HTML. Ensuite, nous pourrons accéder à notre document. Dans notre document, nous mettons une propriété appelée élément de document, et qui est le même que notre code HTML si nous tapons élément HTML maintenant, élément HTML. On y va. En tant que HTML, nous avons notre tête et nous avons acheté notre corps. Et si on ouvre le corps, c'est littéralement un code de loi. Alors on y va. Juste avant d'aller plus loin, je voulais vous rappeler que les trois choses les plus importantes sur l'objet fenêtre, le document et l'élément HTML. Et ceux-ci sont très facilement accessibles depuis le DOM parce qu'ils sont si importants. Cool. Et j'ai dit, je pense que tu as raison. Allons passer à autre chose. 6. Parent, enfants et frères: Nous traversons cette poignée peut sembler lente, mais croyez-moi, vous allez être une protestation absolue. À la fin, nous venons de regarder notre doctype et notre HTML, les deux premières lignes de code. Maintenant, commençons à aller plus loin. Une fois que nous allons au-dessous de ce niveau d'élément HTML, dom va commencer à se brancher et devenir très intéressant. À ce stade, nous avons plusieurs façons de naviguer autour de notre DOM. Une façon que nous avons vu beaucoup de cela est en utilisant QuerySelector et sélecteur de requête tous pour obtenir précisément les éléments qui nous intéressent. de nombreux cas pratiques, ces deux méthodes sont tout simplement trop restrictives. Pourquoi peuvent-ils limiter ? Parce que parfois on ne sait pas ce qu'on cherche. Et en tant que programmeurs, lorsque vous naviguez dans le DOM, vous allez vous retrouver dans cette position tout le temps que vous n'êtes pas tout à fait sûr de ce que vous cherchez. Vous n'avez pas de sélecteur CSS. Ok, super. Alors, qu'est-ce qu'on fait ? Eh bien, ce qui nous aide est ceci, sachant que tous nos éléments dans l'habitude DOM ont moins une combinaison de parents, enfants et de frères et sœurs sur lesquels compter. Visualisons ça. Nous venons de coder notre code HTML. Mettons juste sur l'écran. Cela devrait sembler très familier. On a juste fait ça ensemble. En fait, la seule chose que j'ai ajoutée maintenant c'est que j'ai ajouté une note de commentaire. Vous pouvez voir que j'ai édité, c'est un nœud de commentaire. Je voulais juste rendre les choses un peu plus difficiles pour nous. Regardons tout notre code dans notre corps. Que pouvons-nous dire à propos de cette balise principale ? Redessinons ça. La balise principale est plutôt cool au niveau supérieur. Et oui, nous ignorons le HTML réel et le corps lui-même, qui commence par cette balise principale. Sous cette balise principale, nous avons trois balises d'élément très larges. Ne lisez pas H1, le div, et la profondeur. Jusqu' à présent, si bon. On peut même aller plus loin dans le béton de la rue. Nous savons que nous avons les H 2 et les paragraphes, et ils sont tous imbriqués dans la dose. Jusqu' à présent, si bon. Mais maintenant, je veux que nous commencions à examiner la relation familiale parce que c'est ce qui va nous aider à évaluer ce qui va vraiment nous mettre en avant et notre chorée. Comment fonctionne cette relation familiale ? Comment ça ressemble ? Eh bien, nous savons que cette balise d'élément principal est le parent. Qu' en est-il du H1 et des deux tags div ? Eh bien, ce sont les enfants. Et qu'en est-il en dessous de ça ? Qu' en est-il de tous ces H 2s et les balises de paragraphe ? Eh bien, nous pouvons discuter jour ou frères et sœurs. Alors oui, on l'a. Nous avons le parent, nous avons les enfants en dessous des enfants. On a beaucoup de ces P et H2S. On peut en quelque sorte dépendre de ce qu'on regarde. Mais disons juste qu'ils sont frères et sœurs que H2 et le P, Par exemple. Faisons un pas en regardant les enfants. Vous savez, nous avons le tag H1 que dans deux tags div, nous avons dit que ce sont des enfants, si nous les regardons isolément. Nous savons qu'ils peuvent aussi être frères et sœurs. Et pourquoi pouvons-nous dire que les frères et sœurs le feront ? Parce qu'ils ombrent l'élément principal en tant que parent. L' élément H1 n'a pas d'enfants, mais les éléments div, ont-ils des enfants ? Les éléments d'âge 20 et p des enfants des éléments div, et tous les enfants des mêmes parents ou frères et sœurs ainsi. C' est pourquoi nous appelons ces colorants frères et sœurs. Mais le point que j'essaie de faire est que tout comme dans la vraie vie, le parent, la relation enfant et frère est basée sur le chemin dans l'arbre que nous sommes et qu'est-ce que nous regardons ? Presque tous les éléments, en fonction de l'angle avec lequel nous avons regardé sous, peuvent jouer plusieurs rôles familiaux. Vous pouvez avoir vous-même un enfant, auquel cas vous serez le parent. Les cellules doubles peuvent également avoir un parent étant vos parents, votre mère ou votre père. J' espère que ça fait des scènes. J' espère que tu t'amuses, mais ne t'arrêtes pas. On ne fait que commencer. Allons dans la prochaine conférence. 7. Notion de parent: À ce stade, vous savez combien il est important pour nous de monter et descendre et Dawn, vous obtenez des scènes de la façon dont nous lisons l'arbre généalogique. C' est assez intuitif. Et nous allons entrer dans une approche plus pratique. Nous allons examiner les méthodes que nous pouvons utiliser pour accéder directement à partir de l'API DOM pour se déplacer de haut en bas de la rue. Donc c'est super excitant et j'espère que tu t'amuses. J' ai aussi ce café. Vous pouvez voir ici une belle, belle, belle, belle tasse de café. Oh, ça me fait marcher. Je ne sais pas pourquoi il s'agit d'une tasse de café, juste une tonne de pompe. Alors profite de ces niches et entrons-y. Laisse-moi juste prendre une gorgée et ensuite on fera ces promesses. Et je suis même si c'est un peu de biscuits, devenir actif est cool. Allons-y. Afin de nous aider à monter et descendre l'arbre DOM. Comme je l'ai mentionné, nous avons quelques réunions DOM API que nous pouvons utiliser, et vous devriez être en mesure de déduire par les noms de ce qu'ils font. Quelles sont certaines de ces méthodes ? Nous avons de nouveaux hors-la-loi, une paire de nœuds, nœuds frères précédents, des frères et sœurs suivant, des enfants de la main. Ce sont les principales méthodes que nous allons utiliser pour parcourir vers le haut et vers le bas sur DOM. Et ne vous inquiétez pas, ne vous sentez pas intimidée ou dépassée. Nous allons entrer dans chacun de ces trucs dans le cours. Mais assez dit, Laissez commencer à voir ce que ceux-ci font. Encore une fois, remontons notre code. C' est ce qu'on a fait pour l'obtenir. Rappelez-vous, et le point de départ est cette balise principale, c'est notre wrapper pour tout. C'est le point de départ. Maintenant, pour cet exemple ici, je veux que nous ignorions cette balise div du milieu. Je veux qu'on ignore ce numéro d'identification. Alors faisons semblant de ne pas l'avoir. Je veux seulement que nous regardions la balise H1 et la balise div inférieure. Et la seule raison pour laquelle je fais cela, car, vous savez, la page va obtenir des facteurs très désordonnés comprennent de plus en plus d'éléments. Je veux juste qu'on regarde ces deux-là avec des pistes AINS, qu'on les tire. A quoi ça ressemble ? On sait qu'on a le corps sous le corps. Nous mettons le principal, sous l'étiquette principale, nous mettons le 81 et le div. Et dans la div avec ce que le H2 et l'élément paragraphe. C' est comme ça que nous pouvons le tracer. C' est comme ça que nous pouvons peindre le DOM. Et la première chose que je veux qu'on regarde le point de départ, c'est avec les parents. C' est vrai. Et comme je l'ai mentionné, le nom lui-même le donne et c'est assez intuitif. Donc, disons que nous commençons tout au bas de notre arbre, le H2 et l'élément paragraphe. Nous savons que les nœuds parents, si nous tapons le nœud parent de la méthode sur cet élément H2, nous allons être retournés. Quoi ? Nous allons être retournés son parent étant l'élément div, sens, a du sens. Et de même avec le niveau suivant, nous avons l'élément H1, nous avons le développement. Ils parent nœuds ou cet élément principal. Et bien sûr, nous pouvons faire exactement la même chose avec le Maine ou hors de là. Avant d'aller plus loin, je veux que nous regardions juste un exemple d'utilisation de la carte parent. Disons que nous serons coincés sur l'étiquette H2. Eh bien, il y a actuellement moyen que nous tous dans notre code, comment pouvons-nous accéder aux propriétés sur l'arrière-grand-parent de H2 ? Ce n'est pas le parent, pas le parent du parent. Que l'étiquette de corps grand-parent, comment avons-nous obtenu tout le chemin vers le haut si nous sommes assis sur la balise H2, comme il s'avère, la réponse à cela est assez facile parce que nous sommes autorisés à chaîner les propriétés et les méthodes ensemble. Laissez-moi vous montrer ce que je veux dire. Sautons à la console ou écrivons même. L' armée de l'homme a été vu ce film. Tu te souviens aussi appelé Ace Ventura comme détective enfantine. Il doit toujours dire « Tout droit » alors. Hdfs, monsieur. Et comment allez-vous cet après-midi ? Bien, alors j'ai un paquet pour vous. De toute façon. Nous sommes là. Et l'exemple que nous voulons regarder, comme nous l'avons mentionné précédemment, est que nous sommes assis à cette étiquette H2 et que nous voulons accéder à la propriété du corps. Et pour notre bien, disons simplement que nous voulons changer la couleur de fond sur tout le corps en bleu. Comment ferons-nous ça ? Allons sur notre console et commençons à le voir en action. Et vous pouvez voir ici que je ne l'ai même pas touché depuis notre dernier exemple. Laisse-moi juste nettoyer cette console et bien rangé. Et maintenant, commençons à voir comment le nœud parent fonctionne. Tout d'abord, ce que je veux faire, c'est si nous allons dans l'onglet Eléments et que nous regardons ce corps, et nous ouvrons notre emballage principal. Je veux aller à notre H2 et c'est que j'essaie de le faire. Il a notre H2. Donc, si nous cliquons sur membrane naturelle, l' une des conférences précédentes, je vous ai dit ce que c' est égal, égal signe dollar signifie. Maintenant que nous avons sélectionné, nous pouvons aller sur notre console et nous pouvons arrêter. Donc, disons juste que h, h2 équivaut à des dollars là-bas. Et encore une fois, donc si je le console à l'écran, on peut voir que nous avons une blague chaude de l'élément H2 du jour. Jusqu' à présent. Si bon. Si nous sommes sur cet élément et que nous accédons au nœud parent, rappelez-vous, qu'allons-nous obtenir ? C' est vrai. Nous allons obtenir la div entière qui enveloppe ce code. Souvenez-vous. Je n'avais pas idée de la dent rapide, c'est son parent. Mais j'ai mentionné dans la conférence Ce qui est vraiment cool à propos de ces méthodes spécifiques, nous pouvons les enchaîner parce que rappelez-vous que nous voulions obtenir tout le chemin à l'élément du corps. Alors commençons à travailler à notre façon. absolus existent le nœud parent, et maintenant nous pouvons accéder à son nœud parent, ce wrapper div. Qu' est-ce que ça nous donne ? Eh bien, c'est vrai, ça nous donne cet élément principal. Si nous allons voir notre éditeur de codage, pourquoi est-ce ? Souviens-toi qu'on a commencé à l'étiquette H2. Son parent est le div. Et cette div a des frères et sœurs. Allons à un qui a la div. Ce sont des frères et sœurs. Ce n'est pas son parent. C' est parent est cet élément principal de cette balise principale. Et les parents des éléments principaux, Hayek est le corps. Comme je suis sûr que vous l'avez déjà deviné. Nous devons faire X-Y-Z, ce que nous venons de faire. Tu sais quoi ? Au lieu de le retaper, je vais te donner un prototype rapide. Vous pouvez appuyer sur la flèche vers le haut de votre clavier , puis vous donne simplement la dernière partie de code que vous avez écrite. Et donc au lieu de nous écrire, et encore une fois, nous pouvons simplement cliquer sur la flèche vers le haut. Et maintenant, nous savons que cela nous donne l'élément principal. Tout ce qu'on veut faire, c'est accéder à son parent. Et boum, Chaka LaCa, on arrive à ce corps. Comment les causes. Donc je voulais juste vous montrer que comme nous pouvons réellement traverser tout le chemin vers notre DOM pour arriver au point de départ, qui est ce corps. Et avant qu'on finisse, oui. Et changer la couleur de fond en bleu, j'ai juste changé d'avis. Je pensais, tu sais quoi ? J' aimerais que tu essaies de le faire tout seul. Mais cette fois, je veux que nous commencions à la première balise div. Donc, si je retourne au codage en lui, je veux que nous commencions à cette première balise div et un 12 Vous trop vite maintenant, pause cette vidéo. Je veux que vous essayiez d'accéder à l'élément du corps et changez la couleur, l' arrière-plan, la couleur, toute la page pour les produire , donnez-lui un gars. Peu importe si tu ne peux pas l'avoir. C' est ce que je suis ouais, l'unité complète Owens vérifie sur l'unité et ça n'aura aucun impact sur ce cours. Je veux juste que tu apprennes et que tu profites pleinement de ce cours. Alors arrêtez la vidéo et je vais l'essayer. Et dans les prochaines secondes, je vais vous montrer comment faire une école pour que vous puissiez la mettre en pause maintenant. Ok, c'est fait. J' espère que tu l'as fait. Donc, comme je l' ai mentionné, je veux commencer par cet élément div. Retourne sur notre console. Allons tout effacer. Le premier conseil, c'est que je veux qu'on accède au reste. J' ai dit que je voulais commencer, date et utiliser nous pourrions simplement le taper dans notre console directement. Mais je veux que nous adoptions cette approche parce qu'en tant que programmeur, nous devons être logiques. Et vous verrez qu'il est beaucoup plus facile de logiquement enfants d'une façon ou d'une autre dans l'écriture d'une longue chaîne de code, contrairement à voir cela. Alors comment on fait ça ? Donc disons que DV soit égal à quoi ? Eh bien, dans ce cas, nous savons que nous pouvons utiliser nos méthodes d'accès DOM pour accéder à notre document. Laquelle va-t-on utiliser ? Ce montant ? On peut en utiliser quelques-uns. Il a une identification rapide, n'est-ce pas. Donc nous pourrions utiliser, et je vais juste utiliser des éléments Git, obtenir des éléments par nom de tag, Nano, le nom de tag qu'il a div. Et comme je l'ai dit, je voulais que nous utilisions la première prise. Ok, Donc si une analyse du journal de console, assurez-vous que le bon, et on y va, c'est le bon bout parce qu'il a un ID de Rapa. Nous aurions pu utiliser get element par ID. Il y a plusieurs façons d'éplucher un grain de chat, mais que voulons-nous faire maintenant ? Eh bien maintenant, nous voulons accéder aux grands-parents et définissons une variable appelée grand-parent. Et le grand-parent qui va commencer à la div. Nous allons devoir obtenir son nœud parent. Ensuite, nous allons devoir obtenir son nœud parent. Donc les vaccins. Donc, je commence un peu par les nœuds parents dérivés qui vont être l'élément principal et son nœud parent va être le corps. Si nous retournons ceci et avec taper le grand-parent, ils vont, nous avons la balise corporelle. À quel point nous sommes cool ? Et oui, faisons exactement ce que nous devions faire. Nous accédons à la propriété de style et nous changeons la couleur de fond en bleu. La colle doit être en notation de chaîne. Désolé. On y va. Whoo, ça a amené un ami qui a hideux aux yeux. Mais de toute façon, j'espère que vous avez eu du plaisir dans cette conférence, herbicide de se sentir plus intuitif au-dessus du parent du nœud. C' est bon, non ? Et c'est intuitif. Nous venons de faire notre chemin depuis le bas de l'arbre DOM jusqu'au haut. Ce n'est pas si difficile, paraissant fini. Nous n'avons pas tout à fait fini. Je veux revenir à nos lignes précédentes que nous voulons. Et je veux que nous commencions à creuser davantage de ces méthodes. Sienne. 8. Sœurs précédents et de l'histoire à venir: Je m'amuse. C' est là qu'on s'est arrêté depuis la dernière fois. Nous avons examiné le nœud parent et un hub devient plus intuitif. Donc, ce sont les parents, c'est le nœud parent. Maintenant, je veux que nous regardions les frères et sœurs, les rivalités frères et sœurs. Et encore une fois, commençons tout en bas de notre arbre DOM, le NH2 et le paragraphe. Nous savons que si nous commençons à la balise H2, que la prochaine méthode frère nous renverra le paragraphe. Comme je l'ai mentionné dans le précédent plus tard, les mots eux-mêmes, les noms de méthodes sont tellement intuitifs, comme vous devez savoir ce qu'ils vont faire avant de l'expliquer. Et si nous commençons par la balise paragraphe et nous voulons revenir à la balise H2. Oui, la méthode est appelée frère précédent. Même si nous sommes un niveau dans l'arbre, nous commençons à un, aller aux dérivés le frère suivant. Et bien sûr, si vous ajoutez un div et que vous voulez obtenir 81 retourné, vous pouvez simplement appeler la méthode frère précédente. Impressionnant. Donc c'est le lit des frères et sœurs à nouveau. Tu me connais mec, j'adore regarder des exemples pratiques. Alors passons rapidement à la console et regardons comment nous pouvons utiliser l'inaction prochaine frère. Voyez maintenant, je pensais que ce serait un endroit génial pour nous de juste faire une pause rapide et regarder comment fonctionne notre frère précédent. Alors, quel est un exemple que nous pouvons faire ? Eh bien, regardons cette balise de paragraphe ici. Ok, si j'ai effectivement sélectionné nous sur ce paragraphe, Disons que nous voulons accéder à la blague du jour, son frère et sa sœur précédente, et nous voulons changer cette couleur de fond en bleu. Comment ferons-nous ça ? Il y a quelque chose ici qui peut vous surprendre. Alors allons à la console. Et comme nous l'avons vu lors des conférences précédentes, nous pouvons simplement définir notre paragraphe par l'élément sélectionné dans notre DOM en utilisant le signe dollar 0. Maintenant, si nous définissons et nous essayons d'accéder au frère précédent, vous pouvez déjà voir dans la console qu'il n'a pas retourné. Cette blague H2 du jour qui est revenue. Cela prend note, qu'est-ce qui se passe avec ça ? Eh bien, pendant le stress vont sauter en avant. Nous allons examiner en détail les différences entre frères et sœurs précédents. Et si nous essayons d'accéder et d'autres éléments, vous verrez ici cet élément précédent de frères et sœurs. Ce sont deux choses différentes, très proches, mais elles sont différentes. Et l'une des nuances de frère précédent est qu'il inclut également tous les types de nœuds, pas seulement les nœuds d'élément. Donc, si nous regardons ce que le texte est réellement, vous pouvez voir ici que c'est un retour, c'est un caractère. Donc, si nous le fermons, la raison qui se produit si nous allons à notre console ici, cette déclaration de retour après la balise H2 pour accéder au paragraphe. Laisse-moi te montrer que je ne parle pas de dépouilles. Si je supprime tous les caractères entre les deux balises, cela devrait fonctionner. Maintenant, revenons à notre console. Rafraîchissons. Ici. Commencez à nouveau. Donc, laissez P égal à l'élément actuellement sélectionné, que nous savons être le paragraphe. Et maintenant, si nous accédons aux frères et sœurs précédents, cela devrait fonctionner. Les vins fins ne fonctionnent pas. Il n'a pas été défini, désolé. Alors nous allons rafraîchir. En fait, je dois le soumettre à nouveau. Alors sélectionnons notre paragraphe. Ça va à la console. Maintenant, on peut le faire. Laissez p égal $1. Et maintenant, nous pouvons accéder à son frère précédent, comme nous l'avons fait la dernière fois, mais maintenant nous n'avons plus d'espace ou de caractères entre les deux. Nous avons frappé Retour et le jour où nous allons avec a littéralement obtenu cette classe de joie et nous avons le H2. C' est exactement ce que nous voulions. Et pour vous le prouver, nous pouvons y accéder. Changement dans le style, l'arrière-plan, la couleur au bleu. Voilà, tu y vas. La côte à la maison pour avoir du sens si vous n'êtes pas sûr, ce que je viens de faire, Ils ne s'inquiètent pas, nous allons y entrer plus tard pour l'instant. C' est ainsi que fonctionne le frère précédent. Rendez-vous à la prochaine conférence. 9. Enfants, premier enfant et Children,: Je suis excité et j'apprécie les choses. J'adorerais un deux. On a juste regardé les sous-liens, on a vu comment ça marche. Nous avons regardé, euh, euh, les méthodes avant les frères et sœurs. Rappelez-vous ce que nous avons regardé, nous avons regardé les parents, mais quel est l'amour de chaque parent ? C' est des pourritures. Allons avoir des enfants. Les parents aiment leurs enfants. Et vous pensez peut-être que ce sera aussi facile que les autres. Et laissez-moi vous prévenir, ce n'est pas quand ça commence à avoir deux enfants. Nous avons beaucoup de méthodes à notre disposition et certaines d'entre elles, comme, vous savez, ont intuitif comme les autres, mais c'est bon. C' est pour ça que je suis là et c'est ce que nous allons regarder. Tout d'abord, je veux que nous commencions par examiner les premières méthodes de deuxième enfant. Ok, alors comment fonctionne le premier deuxième enfant ? Tout d'abord, la syntaxe de la méthode est le premier enfant et le travail perdu. Et les propriétés du premier enfant dernier enfant se réfèrent aux parents premier et dernier éléments enfant. Laissez-moi vous montrer ce que je veux dire. Commençons par cette balise div. Comment cet âge peut-il se rapporter à elle ? Eh bien, comme vous pouvez le deviner, c'est le premier enfant de la div. Si nous regardons la balise de paragraphe, comme vous le soupçonneriez, c'est l'enfant perdu de la div. Encore une fois, regardons le du point de vue des principaux éléments. C' est le premier enfant est un 20 GHz, c'est l'enfant perdu est la balise div. Mais maintenant qu'en est-il de cet élément corporel ? Ici, nous pouvons voir que le parent, ce corps n'a qu'un enfant. Cas de volonté. Ce n'est pas si difficile. Nous pouvons en déduire que le premier enfant et l'enfant perdu indiqueront exactement le même élément. Qu' en est-il de l'élément n'a pas d'enfant ? Regardez notre étiquette H1, n'a pas d'enfants, n'est-ce pas ? Dans ce cas, ces propriétés vont retourner null. Ainsi, le premier enfant et l'enfant perdu reviendront. Maintenant, à ce stade, tu penses peut-être, mec, c'est super simple. Basse. La délicate par rapport aux autres propriétés que nous avons examinées jusqu'à présent est la propriété des enfants. C' est juste un peu plus délicat, mais encore une fois, avec un peu de pratique et un peu d'exemples pratiques, vous verrez que ce n'est pas si difficile lorsque vous accédez à la propriété des enfants sur un parent, vous obtenez essentiellement une collection d'enfants éléments que le parent possède. Est-ce que ça a du sens ? Et rappelez-vous, nous avons examiné les méthodes d'accès dans le DOM quand nous l'avons vendu. Certaines de ces méthodes comme getElementsByClassName, getElementsByTagName, ce sont des collections tournées. C' est la même chose ici. Mais comme nous l'avons vu dans les conférences précédentes lorsque nous avons utilisé getElementsBytagName, nom de classe, et cetera, et cetera. Bien que ces collections ressemblent à un tableau, elles n'étaient pas un vrai tableau. Alors gardez cela à l'esprit. Cette charge ressemble et se sent comme un tableau. Dans ce cas, lorsque nous accédons à la propriété children, ce n'est pas un vrai tableau. Ainsi, nous pouvons parcourir le processus de collecte ou accéder au cheval de Troie individuellement, comme nous allons le voir dans nos exemples et comme nous l'avons fait auparavant. Et si je rapidement, la condamnation retournée à nous de cette propriété géorgienne a cette propriété de liens automatiques qui nous dit combien d'objets sont dans la collection. Et puis, bien sûr, nous permet de faire une boucle à travers elle. Si votre tête tourne en ce moment, s'il vous plaît, ne vous inquiétez pas, nous allons coder et nous allons voir à quoi cela ressemble bientôt. Laissez-moi vous montrer d'autres travaux immobiliers à court terme. Mais cette fois, je veux commencer par le haut, regarder le corps et nous regardons ses enfants et dire que nous voulons accéder à cet élément principal. Ou tu devrais faire, c'est qu'on va commencer par le corps. Nous existerons. C'est la propriété des enfants. Et pour obtenir le premier élément de la collection, tout comme un tableau, nous y accédons à partir de son numéro d'index. Et nous savons en JavaScript et beaucoup d'autres langages et l'API DOM, le tout premier élément du tableau commence à la position 0. Donc ce n'est pas si difficile. Et maintenant si nous voulons obtenir cette balise H1 et que nous ajoutons l'élément principal, comment ferions nous cela ? Encore une fois, nous commençons par l'élément principal. Nous accédons à sa propriété enfants et nous accédons au premier élément de ce tableau. C' est intuitif. Et avec la div, nous savons que c'est son deuxième boulot. Donc, nous accédons à l'élément principal, nous accédons à sa propriété enfants, mais cette fois nous accédons au deuxième élément du tableau, ce qui nous rendra bien sûr ce développement. Bien sûr, nous pouvons faire exactement le même processus avec le H2 et le P, Mais cette fois de réutiliser la colombe comme point de départ pour obtenir les enfants à faire face, Il fait des scènes. Mais maintenant, je veux vraiment sauter dans la console. C' est un sujet important à maîtriser. Je vais voir maintenant. 10. Enfants - Exemple: Travailler avec les enfants, c'est comprendre oui ou non. Penses-tu aussi dans le monde réel ? Mais, tu sais, c'est la même chose avec le DOM. Les enfants peuvent être difficiles, qui peuvent être têtus, et ils pensent qu'ils savent tout. Bref, c'est ce qu'on va devoir faire. Oui. Et je veux qu'on passe un peu de temps sur les enfants. Donc, vous verrez même dans la prochaine conférence que nous allons aller plus en détail. Ouais, je veux juste un peu, tu sais, je pensais qu'on allait juste sauter des diapositives qu'on regarde juste. Et regardons ici quelques exemples pratiques de travail avec des enfants. Laisse-moi juste me débarrasser de moi pour que tu puisses voir Beta Adios. Et regardons notre corps. Je veux que nous regardions réellement l'élément du corps lui-même. Revenons à notre éditeur de texte ici. Je veux regarder cet élément du corps et je veux regarder sa propriété des enfants. Combien d'enfants pensez-vous qu'il devrait avoir ? Il y a peut-être eu une question piégée. Il n'a qu'une propriété enfant directe, l'élément principal. Ok, donc il y a notre éditeur de texte. Et ce qui est vraiment cool avant de commencer à coder ici, c'est que le corps est directement accessible sur l'objet document lui-même. Donc, nous pouvons simplement dire que les enfants de corps maigre soient affectés à l'élément de corps de document et avec sur le net. Rappelez-vous quel axe nous voulons accéder aux enfants, ratez-le. Et rappelez-vous que c'est revenu. C' est vrai. Il retourne une collection de tous ses enfants. Donc, si nous appuyons sur Return et que nous déconnectons cette console, nous obtenons une collection HTML. Nous savons vraiment ce qu'est une HTMLCollection. Alors, c'est cool ? Ou ajouter ? C' est pourquoi nous devons apprendre les bases parce que tout se construit l'un sur l'autre. Et nous pouvons voir que cette collection est composée de deux articles. Ne vous inquiétez pas pour le script. Ce script est mon serveur live qui est automatiquement injecté par le serveur live afin que cela s'exécute directement à partir de mon code Visual Studio à toutes fins pratiques, nous n'avons qu'un seul élément dans cette collection et c'est cet élément principal. Rappelez-vous ce que j'ai dit à propos de la HTMLCollection étant un peu comme un tableau, parce que c'est un peu comme un tableau. Nous pouvons accéder à la méthode complète et nous pouvons réellement faire une boucle à travers tous les éléments dans le tableau. Donc, disons que nous voulions avoir une bordure rouge autour de l'élément du corps. Comment ferons-nous ça ? Eh bien, nous pouvons juste utiliser une boucle simple pour. Donc pour moi égale 0, je moins que. Rappelez-vous comment nous avons dit que le corps Jordan a une propriété de longueur afin que nous puissions y accéder directement. Et bien sûr, chaque itération que nous voulons augmenter I. C'est très simple. Tu sauras comment faire ça. C' est juste une boucle simple pour. Que voulons-nous faire à chaque itération ? Allons-nous aller voir son enfant ? Donc, cela devrait dire que l'enfant est affecté à la valeur des enfants du corps. Et selon l'endroit où nous sommes dans la boucle, il retournera cet enfant spécifique et a toujours voulu faire est que nous voulions changer cette bordure de style en, disons juste cinq pixels, gradient solide. On y va. Faisons ça. Est-ce que ça a du sens ? Alors frappons le retour. Et boum, on vient de le faire. On a fait un travail génial. Oui. Alors on y va. On a accédé au corps des enfants. On l'a traversé. Et je sais qu'il n'y avait pas grand intérêt de faire une boucle parce que nous n'avions qu'un seul objet. Le principal, je veux juste un peu, Je veux que vous ayez une idée intuitive de la façon dont nous pouvons utiliser les boucles et les enfants et HTMLCollection. Est-ce que ça fait des saints biais 100, pas tout à fait fait. Il y a une autre chose que je veux vous montrer maintenant, c'était une sorte de l'exemple simple intuitif est quelque chose d'autre qui pourrait être un peu moins intuitif, pourrait être un peu une question piège. Ce que je veux faire, c'est que je veux qu'on accède à notre étiquette H1. Pensez-vous que les enfants de la balise H1 ? Revenons à nos données textuelles pour regarder cette balise H1. Vois bienvenue. Y at-il des enfants de cette balise H1 sera intuitivement, vous penseriez pas. Rappelez-vous où se trouve le diagramme, pas d'enfants et vous savez, vous vous attendez à ce qu'il soit nul pour les enfants. Eh bien, regardons notre console si c'est le cas. spoiler, ce n'est pas le cas. Mais de toute façon, commençons par accéder à cette balise H1. Comment on fait ça ? Encore une fois, nous pouvons utiliser n'importe laquelle de nos méthodes d'accès DOM. Donc, nous commençons par accéder à la racine de notre page Web étant le document sur cet atlas de l'axe du week-end, Dora, de différentes méthodes d'accès. Je vais juste utiliser getElementsBytagName à nouveau, parce que nous savons que nous n'avons qu'une seule balise H1 dans notre document. On y va, on a nos 81. Je peux même le verrouiller pour toi. Vous pouvez voir qu'il s'agit d'une collection HTMLet Nissan chacun. Super, donc nous avons le H1 conduit maintenant axe sa propriété enfants. Comment faisons-nous, comment ferons-nous ça ? Eh bien, je veux réellement quitter l'élément H1 dans une orbite auto pas cette collection. Donc, nous accédons à la collection maintenant, je veux le premier élément de cette collection, puis nous allons accéder à sa propriété enfants. Qu' attendez-vous à voir ? Nous avons ici une HTMLCollection sans rien dedans. Et c'est intuitif. C' est ce à quoi on s'attendrait, non ? On a dit que ça n'avait pas d'enfants. Tellement cool. Tout va bien et bien, mais qu'en est-il si nous utilisons le premier enfant et l'enfant perdu ? Qu'est-ce qui se passerait là ? Vous pourriez penser aussi que vous attendiez à ne rien contenir. Voyons voir, voyons. Donc, nous accédons à H1, le premier élément de cette collection, et maintenant je veux que nous accédions au premier enfant. Si nous revenons que, nous obtenons cette bienvenue prend note a soufflé votre esprit. Donc, cette étiquette H1 a réellement un enfant et l'enfant est le goût lui-même. C' est ce goût bienvenu. Et parce qu'il n'a qu'un enfant prend enfant, vous vous attendez à ce que ce soit la même si nous avons écrit enfant perdu quand près oui. Et c'est la même chose. Et Auguste est le bit qui est un peu moins intuitif, c'est que le premier enfant et l'enfant perdu retourne n'importe quel type de nœud enfant, y compris prend des notes que lorsque nous accédons à la propriété de Troie, il nous renvoie seulement éliminer les nœuds. C' est pourquoi cela a rendu une collection vide contre le premier enfant et l'enfant perdu, ce qui nous a rendu le goût. Ne vous inquiétez pas trop des différences entre le premier enfant et les enfants. Nous allons y aller dans les écoles pour le moment pour commencer à le comprendre. Quelque chose d'autre qui est intéressant est si vous ne vouliez que les éléments font une autre propriété. Donc cet axe, notre premier élément H1 dans cette collection. Et au lieu de taper le premier enfant, nous pouvons parler du premier élément enfant, qui renvoie intuitivement le premier élément et l'enfant de cet élément particulier. Et parce que nous savons qu'il n'a aucun élément enfant, il va retourner null, qui est ce que nous attendions et ce que nous avons vu sur les diapositives précédemment. Nous avons fait beaucoup et merci de m'avoir soutenu. Et j'ai dû signer pour comprendre ça. Difficulté. Et plus vous travaillez avec, plus il est intuitif. Je ne veux pas que ça intimide. Ça ne devrait pas que tu maîtrises ça, aucun d'entre vous ne s'amuse. Et parce que les enfants sont si importants, je veux que nous discutions juste des enfants et épique plus de détails rend des choses vraiment, vraiment cool et intéressantes. 11. Enfants et descendants: Comme je l'ai dit, les enfants sont si importants quand il s'agit de travailler avec le DOM que nous devons nous attarder un peu plus. Nous savons que les enfants ne sont que des éléments qui sont directement imbriqués sous un autre élément. Mais faisons un pas en arrière. Et l'élément HTML peut avoir de nombreux niveaux d'autres éléments imbriqués en dessous. Et tous ces éléments imbriqués sont appelés descendants de notre élément de départ. Et dans nos exemples précédents, nous avons même vu qu'il y a beaucoup de gentil avec les éléments ci-dessous, disent notre élément de corps. Mais ce type spécial de descendant et ce descendant spatial est un élément qui est un niveau d'équipe agréable en dessous d'un nœud donné. Et ça s'appelle un élément. Et un élément enfant important, ne peut jamais avoir qu'un seul parent. Nous savons que tous les goûts dans votre HTML est aussi un noeud prend dans le DOM, un x, y. et nous avons vendu en sorte de nuance particulière quand nous avons regardé notre tag H1, que nous pouvons dire est le parent, quand nous avons essayé d'accéder à son premier enfant et enfant perdu, pensant qu'il allait retourner null. Nous avons vu qu'il effectivement retourné prend lui-même parce que cela prend, est un enfant, il est une prend note de celui du parent comme il a du sens. L' autre chose à mentionner, la SEC, nous avons une variété de méthodes à notre disposition qui nous permettent de regarder les propriétés des enfants et des enfants. Nous en avons vu certains, mais ceux que je veux maintenant me concentrer sur ces ganglions d'enfants froids et les enfants. Regardons les différences entre ces méthodes. Nœuds enfants et enfants. Plop sur notre écran ici. Et regardons les différences. Tout d'abord, si nous utilisons des nœuds enfants, il va retourner une liste de nœuds. Et rappelez-vous que nous avons même passé par la liste des nœuds précédemment dans nos natures. Comment se refroidit à une liste non ordonnée peut contenir n'importe quel type de nœud, n'est-ce pas ? Rappelez-vous, donc nous savons que l'accès aux nœuds enfants points renvoie ou aux enfants de noeud, y compris les noeuds de texte. Alors que si nous regardons la propriété children, nous savons que cela a retourné dans la collection HTML. Nous savons que nous pouvons accéder à la méthode de point Jordan sur n'importe quel élément parce que c'est une propriété d'un élément. Et seuls les vêtements ont cette propriété d'enfant. Pour cette raison, nous savons que ces enfants sont tous de type élément qui ne contient qu'un type d'élément. Et net est la plus grande différence entre les enfants sait et les enfants dans les nœuds enfant net renvoie une liste de noeuds de tout type de noeud en utilisant la méthode children, d'autre part, ne retournera qu'un noeud d'élément. Oui, tu nous as deviné sur la théorie des titres. Passons à l'éditeur de texte et je veux passer par un exemple vous montrant la différence entre ces deux. 12. Enfants vs childNodes - Un exemple: ce moment, je veux que nous payions les nœuds enfants contre les enfants Mackay, celui renvoie une nouvelle liste, celui qui renvoie une HTMLCollection. Nous avons vu cela, mais jetons un coup d'oeil à ces deux exemples pratiques rapidement. Alors emmenons-les. C' est notre code normal que nous avons fait ensemble que nous avons fait à travers cette section entière sur un test pour ne pas ajouter plus à ce code. Plus précisément, je veux que nous ajoutions une liste. Ajoutons une balise de liste non ordonnée à l'intérieur de cela, nous allons avoir trois éléments. Article 1, et nous ferons deux autres éléments, l'article 2 et l'article 3. On y va. Sauvons ça. Et allons sur notre site web. Nous pouvons voir ici que nous avons les points 1, 2 et 3. Nous venons de nous ajouter. C' est clair sur la console. Vous pouvez voir que je fais ça en temps réel. Au fait, c'est exactement le code qu'on a laissé la dernière fois. Laissez-moi juste rafraîchir la page dans la console. Donc, nous voici une toile vierge. Va d'abord, je veux regarder ce noeuds enfant. Jetons un coup d'oeil à ça d'abord. Alors prenons notre u, nos tiges sont liste non ordonnées. Comment pouvons-nous faire ça ? Eh bien, à bien des égards encore, je vais juste utiliser celui que nous avons utilisé récemment et c'est getElementsByTagName. Encore une fois, le nom de la balise ici est l'URL. Nous savons que nous n'avons qu'un seul élément UL dans l'ensemble de notre document. Donc, ce sera une HTMLCollection avec un élément dedans. Et je veux juste exister cet article directement. C' est pourquoi j'accède au premier élément. Et Amy, et ça devrait être notre étiquette UL si nous accédons maintenant aux nœuds enfants. Qu' est-ce que tu penses que ça va retourner le lien ? Il ne retournera que trois articles, l'article 123. Non, ce n'est pas tout ce que j'essaie de faire. Les nœuds restants et enfants renvoie une liste de nœuds, ce qui signifie qu'il va inclure tout le texte et porter les freins et les retours dans notre document. C' est pourquoi si nous l'ouvrons, ce sont en fait sept éléments. Donc oui, il a nos trois tags LI. Il y a un, il y a le deuxième, le troisième. Qu' entre les deux, nous savons que nous avons ces retours. Donc, si nous ouvrons ce texte, nous pouvons voir que la valeur du nœud est un retour et c'est tous les espaces. Nous retournons à notre éditeur de texte. C' est littéralement le retour. Et tous les espaces. Est-ce que ça a du sens ? Donc, la diapositive suivante, comment pourrions-nous, par exemple, parcourir tous ces éléments et changer la couleur de fond ? Eh bien, laissons de côté la boucle pour l'instant. Ce qu'on pourrait faire, c'est avoir accès au premier élément enfant, ne pas gagner. Qu' est-ce que je veux dire par là ? Va me sauver voulu changer la première balise LI à lire. Ce que nous pourrions faire, c'est commencer par notre liste non ordonnée. Nous pouvons accéder au premier élément enfant. Nous pouvons alors évidemment styliser cette couleur de fond et nous pouvons faire ce taux égal, par exemple. Alors on y va. C' est une façon de le faire, mais c'est assez lourd, peu importe parce que nous ne pouvons accéder qu'à un seul élément à la fois. Ici, nous accédons au premier élément enfant, pas au premier enfant. Rappelez-vous, le premier enfant renvoie également genre de chaque type unique d'intuition nerd qui prend, C'est ainsi que nous accédons au premier nœud d'élément. Alors, comment pouvons-nous utiliser une boucle ? Des idées ? Will, de cette façon nous pouvons utiliser les enfants. Rappelez-vous, je voulais comparer les nœuds enfants, que nous avons examinés. Et je veux comparer les enfants, les retours d' enfants et HTMLCollection. Et nous savons déjà qu'une HTMLCollection ne doit se composer que de notes. Alors faisons ça. Nous allons maintenant vous définir, je vais enfants comme étant l'URL. Maintenant, je veux accéder à la propriété des enfants. Est-ce que ça a du sens ? Si nous déconnectons cette console, nous pouvons simplement confirmer avant de commencer à coder notre boucle for-que cela renvoie une HTMLCollection maintenant avec seulement trois balises LI. Et comment nous nous déplacons à travers ce mur, tout comme une boucle normale, je me demande, ouais, laissez-moi juste utiliser ceci comme un modèle de chaise pour LET I égale 0 enfants du corps, mais maintenant ce n'est pas des enfants du corps. Nous avons défini notre variable comme des enfants UL et nous savons qu'il a une propriété de longueur. Comment pouvons-nous savoir qu'il a une propriété de longueur ? Est-ce que je peux ouvrir ça et vous montrer qu'il y a une propriété de longueur de trois. Donc nous savons que nous voulons commencer notre boucle à 0. On veut continuer jusqu'à ce qu'il atteigne cette longueur de trois. Et chaque itération, nous voulons évidemment augmenter notre haut d'un. Ensuite, nous voulons qu'il accède réellement à chaque balise LI. Et nous savons que les balises LI vont être la liste des enfants non ordonnés et va y accéder spécifiquement et ce que nous voulons faire maintenant. D' accord. On peut garder le Let's juste en faire une bordure bleue chacun. Et on frappe le retour. L' enfant n'est pas défini, désolé. C'est l'axe X. Encore une fois, ce n'est pas un enfant, c'est vivant. Cela devrait fonctionner maintenant frapper retour et la rigueur que nous venons de boucler à travers chaque balise LI. À quel point nous sommes cool ? Je sais que vous pensez peut-être à nous dans une scission, compliquée, mais extrait. Ne vous inquiétez pas, nous allons construire les brèves pages pratiques de ce cours et nous devenons plus avancés au fur et à mesure que nous continuons, vous verrez que toutes ces pages se tirent les unes sur les autres. Nous savons déjà maintenant à nouveau avec les listes de nœuds HTMLCollection. Nous avons traversé cela dans une section précédente, donc vous devriez être familier avec la façon dont cool est attaché. C' est vraiment amusant quand c'est DOS comme tirer sur l'autre, nous voyons les effets pratiques. Donc, de toute façon, continuons. Je ne veux pas m'arrêter. Rendez-vous à la prochaine conférence. 13. Défi - Introduction: Tu sais ce qu'il est temps de faire ? C' est vrai. Il est temps de goûter. Mettez vos connaissances à l'épreuve. J' adore ça. Donc ce que je vais faire maintenant, un peu d'iniquité, vous donner le goût de la question. La photo suivante, évidemment, je vais passer par l'exemple avec vous, alors s'il vous plaît essayer sur votre, par vous-même. Ne vous inquiétez pas, ils seront intimidés, devraient être amusants. Et je pense que tu l'auras. Je pense que vous, vos polices de maths pour comprendre comment le faire. Alors découpons ensemble et ça va littéraire et prendre quelques secondes pendant que je veux faire est de créer une balise HTML simple. Dans une balise, je veux que nous ayons une liste non ordonnée dans notre HTML. Évidemment, nous devons avoir un corps, non ? C' est une bonne pratique à l'intérieur de cela, je veux que nous ayons une liste non ordonnée. Nous pouvons dire que ce sont mes petits articles de liste cool. Donc, l'EEG, nous pouvons juste commenter cela. Et je veux juste avoir cinq listes. Vais-je vouloir ? Et ça peut être l'article un. Droit ? Il peut s'agir de l'article 2. Point 3. Article pour un article cinq, voilà. Et c'est une tautologie. Ça ne prendra que quelques secondes. Quelle est votre mission ? Est-ce que mon idée étudiants ? Je veux que vous résolviez deux questions pour moi. La première question est, je veux que vous comptiez combien de nœuds d'éléments ils sont. Puis en dessous de toi, Altaïc. C' est la première question. Combien de noeuds d'élément leur croissance tournent cela ? Cette deuxième question est, combien de nœuds ils sont au total, pas seulement 11 notes, prend des notes, des nœuds de commentaires, et cetra, et cetra. Ils sont sous l'étiquette UL. Donc, ils ont obtenu Deja affectation deux questions très simples. Je veux que tu lui donnes un coup d'œil. Je veux que vous y réfléchissiez. Nous avons beaucoup appris à travers ça. Pause quelques sections et traiter avec les enfants sont très importants. C' est pour ça que je voulais juste te donner un avant-goût. Alors prenez un café, soyez pompé, essayez de résoudre ces deux questions. Ça devrait vous prendre cinq minutes maximum. Et dans la prochaine conférence, je vais vous montrer comment on peut le faire. 14. Défi - Solution: Oui, nous l'avons fait. Génial. Eh bien, je devais y aller. Tu sais, je dis toujours que la chose la plus importante dans ces choses est de s'amuser parce que tu as l'impression d'apprendre mieux si tu aimes vraiment ce que tu fais. Donc, si vous avez bien ou mal, lactone exécuté, le fait est que vous avez essayé et Walden. Donc nous y voilà. Nous avons nos articles à gauche et nous avons notre console à droite. Je veux que nous fassions la solution ensemble. Mais avant nous, laissez-moi me retirer juste parce que je ne veux pas m'empêcher de l'audience de la console. Oui, on a, la première étape est d'avoir notre nouvel élément, non ? Et ça appelle ça une liste. On peut l'appeler comme on veut. Comment on le fait ? Pour accéder à cette URL que nous pouvons accéder à notre document, qui est notre point de départ, getElementsByTagName. Nous savons que nous voulons l'élément UL et nous savons qu'il n'y aura qu'un élément que nous voulons. Le premier élément de cette collection HTML. Boom, nous avons notre liste et je peux me déconnecter pour vous prouver que c'est en fait notre liste. Passons maintenant à notre première question. Rappelle-toi ce que c'était. La première question était, je veux que vous comptiez combien de nœuds d'éléments ils sont dans cette liste. Comment pouvons-nous faire ça ? Utilisons-nous la propriété enfants ou utilisons-nous la propriété de liste de nœuds ? C' est vrai, Nous pouvons utiliser la propriété children, ne peut pas attendre car il renvoie un HTMLCollection d'un seul type de noeud, un noeud d'élément. Et combien vous attendiez à voir ? Et attendez-vous à voir cinq, parce qu'un cinq éléments. Alors on y va. Accédez à notre liste. Et bien sûr, nous pouvons accéder aux enfants que je ne veux pas retourner le Jourdain, je veux retourner seulement la longueur, non ? Nous avions besoin de compter combien pouvons-nous faire ça ? C' est vrai. On peut accéder à la propriété de longueur et on y va, on en a cinq. Bien joué, bien joué. Je t'ai dit que ce n'est pas si difficile. Bien sûr, dans la programmation, il existe de nombreuses façons d'écorcher un chat. Donc une autre méthode que nous pouvons utiliser car nous pouvons accéder à notre liste. Et si vous commencez à taper, vous pouvez même voir dans notre console ici, ceci est tout droit sorti de la boîte. On vous donne beaucoup de cool que les méthodes d'aide. Il essaie de nous aider. Le tout premier de cette liste est le nombre d'éléments enfants. Pour que nous puissions y accéder. Et comme son nom l'indique, un compte combien d'éléments enfants ils sont. Et c'est une autre façon d'arriver exactement à la même chose. Comme nous pouvons le voir, les logs de ces deux méthodes produisent le même résultat, mais chacune utilise une technique différente. La propriété children est une propriété en lecture seule et renvoie une conviction des éléments HTML à l'intérieur de l'élément interrogé. Nous utilisons ensuite la propriété length pour obtenir le nombre d'éléments à l'intérieur de cette collection. D' accord. Donc c'est la propriété des enfants. Qu' en est-il du nombre d'éléments enfants ? L' accès à l'élément enfant me comptera qui est directement plus intuitif et directement au point. Donc, à mon avis, c'est beaucoup plus propre. Voilà donc la solution à la première question. Et la deuxième question ? Tu te souviens de ce que c'était ? La deuxième question était, combien de nœuds y a-t-il dans la balise UL ? Pas seulement des notes d'élément, mais combien de nœuds en général, comme je suis sûr que vous avez deviné déjà être nous ne pouvons pas utiliser la propriété des enfants, n'est-ce pas ? Parce qu'il y en avait deux dans une HTMLCollection, nous devons utiliser quoi ? Nœuds enfants, c'est vrai car cela renvoie une liste de nœuds. Alors donnons ça un coup de pouce. Et avant de vous donner la solution, laissez-moi aller ici à Visual Studio Code. Et combien d'articles pensez-vous qu'ils devraient être ? Intuitivement, combien de nœuds enfants pensez-vous qu'ils seront pour ? Eh bien, si vous prenez juste le commentaire et les éléments, vous pouvez voir les cinq éléments dans un commentaire. Donc, les six nœuds de base, mais la réponse n'est pas six. Tu te souviens ? On a aussi des notes. Nous avons une nouvelle ligne et des caractères avant le commentaire. Ici. Nous avons un peu sur le commentaire après chaque heure que je marque. Donc ça veut dire qu'on s'attendrait aux six, accord, les six de base de départ. Ensuite, nous nous attendrions 7, 8, 9, 10, 11, 12, 13. Voyons ce que nous obtenons. Donc, si nous revenons ici à notre console avec accès à notre liste, et maintenant nous voulons accéder aux nœuds enfants, nœuds enfants, et nous voulons accéder à la propriété length. Ils sont pratiques, nous l'avons. On en a 13. J' espère donc que cela a du sens. J' espère que vous avez apprécié cette mission. Je pense que c'est assez amusant. Et aussi, il vous apprend à utiliser les enfants et les nœuds enfants. Et croyez-moi, ça va être très bénéfique pour vous en tant que développeur. Continuez, restez motivé, prenez un café, et je vous verrai à la prochaine conférence. 15. Siblings: Last but not least, sur un nous pour discuter rapidement de ses frères et sœurs. Et nous savons que les frères et sœurs ne sont que des éléments qui partagent le même parent. Donc tu peux dire que les frères et sœurs sont comme frère et soeur. Ils sont tous situés dans le même niveau d'arbre dans le DOM. Laisse-moi éclaircir quelque chose d'abord. Les frères et sœurs n'ont pas à être du même type. Tout comme votre frère ou votre sœur n'est pas le même que vous, vous êtes probablement complètement différent d'eux. C' est pareil dans l'arbre DOM. Ils n'ont pas à être le même moment. Nous savons aussi que les nœuds plus élevés qu'un frère, nos ancêtres, et ceux en dessous sont des descendants. Il s'agit là d'une sorte de terminologies courantes utilisées dans la communauté de la programmation. Et au cas où vous vous demandiez, nous en avons déjà vu certains avant. Ce sont quelques méthodes que nous pouvons utiliser pour accéder aux frères et sœurs précédents et aux frères et sœurs suivants. Jetons un coup d'oeil à certaines de ces méthodes en action. 16. S'est : exemple: Donc, nous sommes là, nous regardons les frères et sœurs. Ce que je veux faire, c'est que je veux accéder à notre deuxième, je vais prendre celui au milieu et je veux juste changer ce style. Et je sais que c'est terrible d'utiliser le style en ligne, mais c'est un exemple si simple. Je veux juste le garder comme ça. Et cela change la couleur d'arrière-plan en vert. Il est maintenant aller à notre navigateur. Supprimons l'exemple précédent. Il a la mission, on vient de le faire. Maintenant, nous pouvons, et le point central devrait être vert. C' est celui qu'on vient de coiffer. C' est accéder à la console et effacer la console avant de commencer à coder, je veux juste souligner ici que les propriétés et les méthodes frères fonctionnent très similaire aux méthodes enfants que nous venons de voir. En ce que certaines méthodes ne traverseront que des noeuds d'élément, tandis que d'autres méthodes traverseront réellement chaque type de noeud. Encore une fois. Donc on a déjà traversé ça avant, ça ne devrait pas être une surprise. Mais la chose cool avec les frères et sœurs est que c'est beaucoup plus intuitif, juste le mot de la méthode elle-même. Donc frère précédent et frère Nick ou retourner n'importe quel type de nœud, n'importe quel type de frère. Alors que les éléments précédents frères ou les éléments suivants frères, d'autre part, bien sûr, ne retournera que ces éléments frères et sœurs. C' est donc plus intuitif dans ce sens. Tout d'abord, je voudrais vous demander comment en sommes arrivés à ce point intermédiaire 2 ? Comment ferons-nous ça ? Parce que ce que je veux faire, c'est que je veux changer la couleur de seulement l'article 1 et l'article 3. Romanicien, comment ferons-nous ça ? Eh bien, le point de départ le plus facile dans mon esprit serait d'accéder à l'article à un au milieu. Et puis tout ce que nous avons à faire est de changer la couleur d'arrière-plan des éléments précédents, Sibley, et les éléments suivants de plomb. C' est comme ça que je pense faire ça. Donc, le point de départ est d'exister ce point intermédiaire à allier, comment ferons-nous ? Le point de départ devrait être d'accéder au prix catalogue non commandé, car alors nous pouvons commencer à accéder à la salle de stockage. Donc, tout d'abord, définissons une variable appelée URL. Ce que nous voulons faire, c'est que nous voulons accéder au getElementsByTagName. Nous avons traversé cela, vous remarquez que nous savons que cela va retourner une HTMLCollection, n'est-ce pas ? Et nous savons que je vais en page tout un document ne se compose que d'un, vous Altaïc. Nous voulons donc accéder au premier élément de cette liste. Alors voilà, voici notre U L, et si on se déconnecte, je peux te le prouver. C' est là. Faire du sens est intuitif jusqu'à présent. Mais maintenant, comment pouvons-nous accéder au point intermédiaire ? Eh bien, si vous pensiez que nous pourrions utiliser des enfants, vous avez raison à 100% parce que les enfants ne contiennent que des éléments et nous pouvons voir l'élément trois éléments. On veut accéder à la seconde, non ? Celui au milieu. Donc, tout ce que nous avons à faire est de définir une variable appelée valeur de l'axe moyen L quitte les enfants dans cette balise UL. Et nous voulons l'élément central, alias le deuxième élément de cette collection. Alors on y va. Nous console journal milieu. On y a littéralement accès en ce moment dans une variable. Aussi. Maintenant, si nous voulons changer cet élément, une, cette couleur de fond, pour dire rose, comment nous le faisons ? Rappelez-vous que nous avons des méthodes différentes et qu'il s'agit de frères et sœurs. Nous avons des frères et sœurs précédents, et nous avons des éléments précédents. Un frère et une sœur. Si nous utilisons juste un frère précédent, laissez-moi vous montrer ce que nous obtenons. Mon frère précédent. Le problème avec cela est qu'il renvoie tous les nœuds et cela signifie que nous sommes réellement retournés à nous ce texte. Et dans ce cas, le goût est juste de rendre le caractère avec tous les tas d'espaces. Ce n'est pas ce que nous voulons, c'est que nous voulons réellement l'élément lui-même. Donc, voici une façon de le faire est de faire le frère précédent et l'imitation existent à nouveau, le frère précédent. Et puis nous obtiendra l'article dont nous avons besoin à nouveau. Mais c'est encombrant. C' est pourquoi l'API DOM nous donne une approche plus intuitive à cela. Et cette approche intuitive accède à la variable médiane. Et il est juste appelé les éléments précédents frères. C' est tout ce qu'il y a. Et bien sûr, nous pouvons accéder à la propriété de style. Et nous pouvons changer la couleur de fond pour dire rose. On y va. Nous venons de changer la couleur de fond de l'article 1 en rose. Et maintenant l'atome 3 ? Eh bien, oui. Encore une fois, nous pouvons accéder à la prochaine frère peut prédire frère, comme vous pouvez le voir dans la console, il va retourner le nœud de texte. Donc oui, on peut l'enchaîner à nouveau, mais c'est plus lourd. Le moyen le plus simple est d'accéder à notre variable et de viser à accéder directement à l'élément suivant dans la méthode frère. Nous pouvons ensuite accéder à cette propriété de style, changer la couleur d'arrière-plan pour dire. Donc aujourd'hui, nous l'avons. Nous venons d'utiliser Nick frère, élément suivant, frère, frère et frère précédent, et les éléments précédents frères. J' espère que ça va faire des scènes que vous pouvez voir qu'il est assez intuitif. Ce n'est pas si difficile. Donc nous avons vu des parents, nous avons vu des enfants, nous avons vu des frères et sœurs. Je ne pense pas que vous vous rendiez compte de cela, mais en ce moment, vous êtes en train de devenir assez avancé pour travailler dans le DOM. Et beaucoup de gens ne comprennent pas ce que ces méthodes. Alors alors que je suis super, super impressionné, on a fait beaucoup mieux. Nous n'avons pas tout à fait fini. Est beaucoup plus ascenseur dans ce cours. 17. Résumé: Sérieusement, sérieusement, tu as fait une somme incroyable. Je suis super excité. Nous venons de terminer la section sur la façon dont vous pouvez traverser le DOM. Et parfois je pense que tu ne réalises pas à quel point tu es vraiment allé. Je veux dire, maintenant et vous savez, si le dôme est, vous savez, comment diffère de votre code HTML. Nous avons traversé des méthodes d'accès. Donc, si vous connaissez l'ID ou le nom de coût du nom de balise, vous pouvez accéder littéraire à cet élément spécifique directement à partir du DOM. Mais encore plus que nous avec juste toute la traversée du DOM. qui signifie que même si vous ne savez pas quel est le nom de la classe ou l'ID, nous pouvons déplacer de haut en bas le DOM et changer les choses à notre guise. Donc Walden et moi pensons que nous aimerions le prendre et vous avez déjà appris une quantité incroyable. Nous avons passé par des exemples pratiques, nous avons traversé en théorie, nous avons même fait des goûts à atteindre. Donc comme Silverstein, Walden, comme continuer, reste motivé. Et pour l'instant, je veux juste donner un bref résumé de ce que nous avons appris. Et dans la section suivante, tout va vous faire exploser l'esprit parce que maintenant nous allons commencer non seulement à bouger dans le chien et je vais arrêter de le manipuler. Donc tu vas en Amérique va l'être. Donc vraiment, merci beaucoup, Walden. Merci. Respirez, détendez-vous et profitez du reste de cette très courte conférence. Et je te verrai dans la section suivante. Des audios. Nous sommes presque, presque finis. Ce n'est qu'une conclusion rapide sur ce que nous avons appris dans cette section sur la traversée du DOM. Nous avons appris à accéder aux nœuds. Et ce faisant, nous savons maintenant comment marcher l'arbre DOM, comme on dit dans la communauté du développement. Et cela impliquait d'apprendre sur le parent, d'apprendre sur les enfants. Et bien sûr, entre les enfants, apprenant comment les frères et sœurs fonctionnent, vous devriez maintenant être en mesure d'accéder en toute confiance à n'importe quel nœud dans le DOM et ne pas prendre cette compétence pour acquise à est vraiment important. Comme je viens de le dire, nous avons encore une tonne d'informations à apprendre et un long chemin à parcourir. Alors asseyez-vous, prenez un éleveur, profitez-en, et je vous verrai dans la section suivante. 18. Il est temps de créer des éléments dynamiques: Bienvenue dans cette nouvelle section sur la création d'éléments dans le DOM. Donc, c'est très cool que maintenant et vous pouvez réellement accéder aux éléments dans le DOM. Vous pouvez traverser le chien de haut en bas. Mais savez-vous ce qui est encore plus Columbus ? Il crée de nouveaux éléments dans le DOM parce que mes amis, c'est ce qui fait que les sites et les applications de la semaine sont cochés. Nous devons créer des sites web dynamiques. Et pour vous rappeler, site esthétique est un peu de nous juste pourrir notre HTML et puis rien d'autre ne se passe. ennuyeux, n'est-ce pas ? Beaucoup plus excitant pour nous, est la création de taille de largeur dynamique. Et cela signifie que nous utilisons des langages, plus souvent JavaScript que nous pouvons utiliser d'autres pour accéder et manipuler le DOM qui créent de nouveaux éléments à la volée. Donc ça va être une section super excitante. Crois-moi, on va apprendre dans une maman d'information lisible. Donc chansons ninja numériques, prêt, préparez-vous. Voyons comment créer des éléments dans le DOM. Je suis super, super excité. C'est un guide. 19. Sites statiques vs dynamiques: Ok, alors qu'est-ce qui est le prochain ? On a appris à utiliser des gloses. Ces balises sont-elles excentriques, cetera, pour trouver n'importe quel nœud dans le DOM. Et encore une fois, ne prenez pas ça pour acquis. C' est une habileté géniale. Pourriture. Maintenant, nous pouvons également utiliser les propriétés parent-enfant et frère pour parcourir l'aube vers le haut et le bas. Et je vais le souligner à nouveau. C' est cool. Mais savez-vous ce qui est encore plus cool ? Possibilité de créer et de modifier des éléments dans le DOM. Donc, en prenant un peu de recul, nous pouvons dire que nous avons deux types de sites web, statiques et dynamiques. Par statique, je veux juste dire que les éléments sont ajoutés à la page en écrivant directement du code dans votre fichier index.html. Quand UNE Jane ennuyeuse, boiteuse , ordinaire, vous obtenez les points. Sites statiques, juste un peu plus. Surtout dans le monde dans lequel nous vivons maintenant. Ce qui m'amène à des sites web dynamiques. C' est là que les éléments sont ajoutés avec JavaScript. Oh doux NAS, la SEC fois. Vous obtenez les points. C' est cool. C' est ce que nous voulons sur nos sites Web. C' est ce que nous, vous savez quoi, ce n'est même pas un 12. C' est un besoin. Si vous n'avez pas de sites web dynamiques maintenant, vous allez juste être laissé derrière la courbe, qui est y. La première partie de ces sections dans ce cours nous allons tout sur son accès au DOM. Mais ce n'est pas suffisant parce que l'accès au DOM nous permet seulement à mi-chemin. Nous devons également apprendre à créer dynamiquement des éléments dans le DOM. Donc, je suis super, super excité dans la section sont vraiment m. Je veux juste répondre à quelques questions avant de passer à réellement codage. Plus précisément, je veux voir comment nous pouvons créer des articles et aussi du blé au fur et à mesure que la méthode vient, ce qui nous permet de le faire. Jetons un coup d'oeil à ça rapidement. 20. Où créer créer un Element(): façon la plus courante de créer un élément est méthode d'élément drumroll qui nous est donnée par l'API DOM. La question que vous avez probablement cependant, est, où trouvons-nous cette méthode va juste sauter sur la console et jeter un oeil. Donc nous y voilà. Je viens d'ouvrir une page Google Chrome là-haut. Rien à ça. Je veux trouver avec nous la méthode de création d'élément vient. Examinons notre document comme nous le faisons habituellement. Vous devriez être très familier avec ce banal. Et allons à la console. Effacons la console et commençons à chercher avec cette méthode est, vous pourriez penser, Ok, cool. Commençons par regarder dans le document. Le problème en tapant un document comme celui-ci, comme nous l'avons vu précédemment, est qu'il nous donne réellement la représentation HTML de notre document. On ne veut pas ça. Nous voulons que la notation JavaScript ou les représentations de type JSON le fassent, comme je suis sûr que vous vous en souviendrez. Nous consolons la saleté du document à l'écran. Cela nous donne maintenant un document au format JSON. Et tu sais quoi ? Laisse-moi me débarrasser de moi parce que je ne veux pas m'empêcher. Maintenant, ce que nous pouvons faire, c'est commencer à examiner ce document. Si nous ouvrons ce document et nous examinons la création d'éléments et les mers. Et vous pouvez voir qu'il n'y a nulle part où on le trouve. Dès que cela vous est arrivé, le prochain point du charbon est de regarder son prototype. Donc, si nous faisons défiler en bas, vous voyez ce proto, son prototype est le document HTML. Ne vous inquiétez pas, nous allons entrer dans tout ça plus tard dans le cours. Pour l'instant, on essaie juste de le trouver. Alors ouvrons ce proton. C' est ouais. Créer des éléments. Non, non, ce n'est pas le cas. Donc encore une fois, même chose qui défilent vers le bas jusqu'à son prototype, qui est document. Mais oui, c'est un D. capital. Ouvrons ça. Et cela a-t-il créé élément ? Est-ce que cela a la méthode create element. Cooh, c'est ce que tous ces protons et quel est ce grand D pour les documents ? Revenons rapidement aux diapositives. Je veux en discuter un peu plus en détail. 21. La différence entre Document et document: Nous venons de voir où trouver cette méthode d'élément de création. Maintenant, c'est une conférence vraiment intéressante que nous allons suivre et elle est très avancée. Peu de gens savent comment tout cela va ensemble. Alors considérez-vous comme l'un des rares chanceux. J' espère que vous apprécierez ça et j'espère que vous l'apprécierez. Mais c'est continu. Donc, nous venons de voir que nous pouvons trouver cet élément crée sur l'objet document. Et la chose clé que je veux souligner est que ce n'est pas la même chose que le petit d. C'est un D majuscule, l'objet document. Donc, ce que je veux faire maintenant, c'est que je veux comparer le document avec le document que nous utilisons tous faire avec le petit d. Quelle est la différence et pourquoi ce document est-il ce qui a examiné cela ? Nous savons que nous avons dû commencer par consoler le document à l'écran. Nous ne pouvions pas simplement le console directement parce que cela nous donne la représentation HTML. Et nous avons vu que le proto de ce document est le document HTML. Tout homme, qu'est-ce que cela signifie, ce document HTML et pourquoi a-t-il jusqu'au jour et comment cela se rapporte-t-il au document ? Nous allons consigner la fonction constructeur de ce document. Jetons un coup d'oeil maintenant. Nous allons faire maintenant, c'est que je veux voir ce que cela a construit et que nous allons accéder à notre fenêtre, à notre document sur la fenêtre. Et accédons à cette fonction constructeur, constructeur. Si nous retournons ceci, nous pouvons voir que ce qui nous est retourné est ce document HTML construire une fonction. C' est très, très important. Comme nous l'avons vu, nous pouvons conclure que l'objet document est construit à partir du constructeur de document HTML. Nous pouvons donc dire qu'une partie du but de cet objet de document HTML est de créer ce document pour nous. Maxine est devant. Ça va venir d'une manière ou d'une autre et c'est de là qu'il vient. Ok, super. Maintenant, nous avons notre document que nous utilisions tous. Mais qu'est-ce que ce document va faire ? Découvrez que nous pouvons simplement consoles journal obtient le type de nœud. Donc, nous quittons le document de fenêtre pas de temps. Et comme vous le découvrirez, les journaux de la console 99 est le code pour le nœud de document. Nous savons que le document HTML construire une fonction crée le document. Et nous savons également qu'il est hors type de nœud de document. Pourquoi est-ce pertinent pour nous ? Parce que le document est un objet nœud de document. Nous savons qu'il hérite du nœud de document. Et oui, c'est un D majuscule n'est pas le même que r petit d. C'est le grand D. Et parce qu'il hérite du document et vous pourriez presque dire que le nœud de document est théoriquement la racine du document. Mais ce n'est pas vraiment la racine du document à toutes fins pratiques. Parce que la racine de notre page Web est le premier nœud d'élément dans le document, qui est l'élément HTML. Laisse-moi te montrer ça maintenant. Passons à la console cutie ou ion. Donc, nous pouvons voir le genre de à la racine de notre système entier est ce nœud de document. Mais dans tous les aspects pratiques, ce n'est pas vraiment la racine de notre document. Il devrait être le document HTML et je vais vous montrer pourquoi, Parce que nous voulons accéder au premier élément dans ce nœud de document. Donc, pour ce faire, nous allons la console. Je vais documenter Archea. Et bien sûr, ce que nous pouvons faire, c'est que nous pouvons ouvrir ce document. Nous pouvons ensuite faire défiler vers le bas jusqu'à son proton, qui est le document HTML. Nous pouvons ensuite faire défiler vers le bas jusqu'au document. Et je veux juste te montrer ici, si on regarde le premier élément enfant, qu'est-ce qu'il y a là-dedans ? On y va. C'est notre HTML. C' est un objectif tout pratique, la racine de notre document HTML. Donc Rebecca, c'est là qu'on s'est arrêté. Nous savons que la racine de notre page est dans toutes les fins pratiques, l'élément HTML. Nous pouvons donc dire que l'élément HTML est la racine ou l'élément de niveau supérieur de notre document HTML. Et lorsque ce fichier HTML est chargé dans notre navigateur, nous savons que cette fonction constructeur démarre et il devient l'objet document. Et le capital de document D est le nœud ultime à partir duquel je vais documenter hériter de PS, fois le document et les constructeurs de document HTML tous instanciés par le navigateur automatiquement. Lorsque vous chargez un document HTML. C' est de là qu'ils viennent au cas où vous vous demandiez. Et généralement, l'utilisation de ces méthodes est associée à la fourniture d'un document HTML à un iframe. Mais de toute façon, c'est un peu avancé. Mais ce que nous avons appris dans cette conférence est incroyablement avancé. Vous connaissez maintenant la différence entre le petit objet de document d. Ensuite, il hérite finalement de ce gros nœud de document D. Et puis entre vous avez un peu ce noeud d'élément HTML et le cou coup de pied avec un construit en gras le document est 100, peut sembler un peu déroutant, mais croyez-moi, il est très avancé et bien fait pour aller aussi loin. J' espère que tu apprends une tonne, mais n'arrête pas. Je te verrai à la prochaine conférence. 22. Plus sur createElement(): Entrons dans la viande de créer un élément sur notre page. Et c'est, je veux que nous parlions de la méthode create element. Tout ce que nous avons à faire est d'appeler l'élément create sur notre objet document. Nous accédons donc à notre document en utilisant la notation par points. Nous accédons à la méthode de l'élément. C' est simple. Et comme argument, tout ce que nous avons à passer comme nom de balise HTML, aka nous devons lui dire quel élément nous voulions créer. Fais du sens. Laissez-moi rapidement sauter à la console et vous montrer comment cela fonctionne. À la fin de cette section, vous allez être un grand maître créant des éléments. Je veux que nous sortions rapidement de ces lignes que nous examinions. Et je veux que nous regardions rapidement juste créer élément. Je veux que vous voyez à quel point c'est facile et intuitif. Alors on y va. J' ai un Google Chrome normal. Ouvrir. Ceci, il suffit d'accéder à la console. C. On y va. Nous avons Google Chrome ouvert avec la console. Très simple limiteur zoom avant pour que vous puissiez voir la console mieux. Et disons que nous voulons ajouter un paragraphe à sur DOM. Comment on fait ça. Eh bien, définissons une nouvelle variable appelée new para. Pour créer un élément, nous devons accéder à notre objet document. On le sait. Nous utilisons la notation point pour accéder à toutes ces propriétés et méthodes. Et celui que nous voulons est créer un élément. C' est très intuitif. Nous voulons créer, bien sûr est une balise de paragraphe. Et puis nous y allons, nous avons réellement créé un élément de paragraphe. Comment facile et amusant était à. Je peux vous montrer que nous l'avons créé en déconnectant simplement la variable de la console, et voici notre balise de paragraphe. Mais ce qui pourrait ne pas être aussi intuitif est, pensez-vous que cela a été ajouté au DOM ? Ou comment on l'a découvert ? Définissons une nouvelle variable appelée HTML ramada. Définissez cela. Nous avons examiné les trois objets les plus importants de notre DOM, dont l' un est le HTML. Pour obtenir cela, nous accédons simplement à la propriété de l'élément de document sur un document. C' est simple. Et si nous conservions nos données HTML, et si nous ouvrons notre corps, nous n'avons pas la paire de Billy. Nulle part dans la viande. Même rendre cela un peu plus large pour que vous puissiez le voir. n'y a pas de paragraphe et c'est le but d'essayer de faire et nous l'avons créé. C' est juste dans le no man's land. Revenons rapidement aux diapositives parce que je veux en parler un peu plus en détail. Impressionnant. Nous venons de voir à quel point il est facile de créer un nouvel élément. En particulier, un élément de paragraphe. Pour récapituler, nous avons créé une nouvelle variable appelée nouveau para et net nouvelle paire de variable tenir une tonalité de référence, élément nouvellement créé. Nous avons littéralement créé un nouvel élément de paragraphe. Oui. Pas si vite sur vos chevaux. La création de cet élément de paragraphe est très rapide et facile, mais il est juste flotter autour de manière transparente dans l'espace tout seul. La raison pour laquelle l'élément paragraphe est perdu parce que le DOM n'a aucune idée qu'il existe. Tous inclinés, qu'est-ce qu'on fait ? Comment pouvons-nous dire au dominant qu'il existe ? Pour que cet élément, ce paragraphe fasse partie du DOM, nous avons besoin d'un moyen de le dire. Ne vous inquiétez pas. Permettez-moi de couper aux échecs pour qu'un élément fasse partie du DOM. Les deux autres choses que nous devons faire. Alors faisons un pas en arrière. Nous avons créé notre balise de paragraphe qui flotte sans but, et nous avons utilisé pour créer une méthode d'élément pour le faire. Les deux choses que nous devons faire pour l'attacher au DOM. Premièrement, nous devons trouver un élément qui agira comme un paragraphe de dossiers parents. C' est la première chose que nous devons faire. La deuxième chose que nous devons faire est que nous avons à l'élément que nous voulons, dans ce cas le paragraphe à un élément parent. Et nous le faisons généralement en utilisant un enfant de peinture qui peindre la méthode enfant. Est-ce que ça a du sens ? Alors faites un pas en arrière. La première instruction dans la création d'un élément est de le créer réellement. Mais ce n'est pas suffisant. Nous devons ensuite définir où nous voulons le placer dans le DOM. Pour faire ça, on doit penser, Ok, cool, qu'est-ce qu'on veut que ce soit aux parents ? Et puis nous devons l'attacher au parent. J' espère que ça a du sens, mais ne t'inquiète pas si ce n'est pas le cas. Parce que comme toujours, nous avons besoin de voir ça dans la scène d'action. 23. Ajouter un élément au DOM: Ok, donc nous avons vu que lorsque nous utilisons l'élément de création, il flotte en quelque sorte dans l'espace. Et la raison en est que le DOM n'a aucune connaissance réelle que cet élément existe. Et nous avons aussi vu que pour qu'un élément fasse partie du DOM, les deux choses que nous devons faire pour nous souvenir de ce qu'ils étaient. C' est vrai. La première chose est que nous devions trouver quel élément nous voulions agir en tant que parent. Et deuxièmement, une fois que nous avons fait cela, nous utilisons une méthode appelée enfant de la douleur pour ajouter cet élément au parent. Laissez-moi vous montrer ce que je veux dire. Donc, nous y voilà. J' ai Visual Studio Code ouvert et j'ai le navigateur sur la droite. Je vous encourage vraiment à coder avec moi parce que j'ai eu plus de plaisir. Vous apprenez plus. Alors, on va se fissurer. Je veux juste créer un modèle HTML très simple ici. Et oui, on va avoir une section de tête dans la tête. On va avoir un titre. Nous pouvons appeler nos éléments de création de titre. Et bien sûr, nous pouvons avoir une étiquette de style, ce que nous n'étions pas tout à fait en ce moment, mais nous allons le faire bientôt. Donc c'est notre tête. Dans notre corps, je veux une page très raisonnable et elle veut juste une étiquette H1. Et ça peut être appelé MI réel. Nous enregistrons ceci et actualisons le navigateur. On peut voir que ce sont des H1. Jusqu' à présent, si bon. Maintenant, ajoutons un paragraphe à cela. Eh bien, vous savez ce qu'en fait, tout d'abord, nous allons styler ce rapide. Cool. Quel genre de style pouvons-nous faire ? Faisons juste une couleur de fond simple parce que le blanc est juste hideux. Ainsi, nous pouvons changer la couleur d'arrière-plan à une autre. Disons une belle couleur cool, funky floue, violette. On y va. Et ajoutons un peu de rembourrage à cela. Donc, ce sont des corps. Je veux que nous stylisions maintenant notre étiquette h1 aussi parce que je ne peux pas vraiment le lire très, très clairement. Donc, changeons la couleur de notre balise H1 pour entrer un pour if, if, if, si sept. Juste pour qu'il soit plus lisible, nous pouvons réellement le voir maintenant, augmentons la taille de la police de ceci. On peut changer la famille de polices. Mettons juste un accent sur ce goût. Alors, comment va cette LMR ? Et maintenant, ce que je veux que nous fassions, c'est que nous ajoutions un paragraphe à cette page. Qu' est-ce qu'on fait ? Eh bien, utilisons JavaScript pour le faire. Donc, je vais inclure un script au bas de cette page et a besoin de codages de points et de JavaScript. Ajoutons notre balise de paragraphe pour nous rappeler comment faire cela. Eh bien, tout d'abord, définissons un nouvel élément. Et ce nouvel élément va être un paragraphe. Eh bien, notre point de départ dans une page entière est cet objet de document. Nous quittons l'une de ses propriétés et méthodes et celui que nous voulons est créer élément. On le sait, on l'a déjà fait avant. Et l'élément que nous voulons créer est ce paragraphe. Et c'est la première étape. Rappelez-vous que nous avons fait cette dernière fois que nous avons créé un élément burnouts flottant dans l'espace. C' est tout seul. Comment ensuite l'attacher maintenant au DOM ? Facile, nous devons d'abord trouver son parent et ensuite nous devons utiliser un enfant douloureux. Alors voyons à quoi ça ressemble. Appelez ça l'étape 1. Prenons le parent. Et disons simplement que nous voulons obtenir ce paragraphe à notre corps. Donc, bien sûr, nous allons juste définir une variable appelée élément body. Bien sûr, documenter et comment nous pouvons utiliser une pléthore de méthodes. Nous l'avons déjà fait auparavant, mais je veux utiliser le sélecteur de requête. Et nous voulons avoir le corps. Laisse-moi juste rendre ça un peu plus grand. Comment ça va ? S'assied sur une ligne. On y va. C' est donc la première étape. La deuxième étape est, attachons maintenant notre balise de paragraphe à ce corps. Et c'est super simple. Tout ce que nous avons à faire est d'accéder à notre parent, que nous définissons une variable appelée élément body. Et nous devons accéder à une méthode sur cet élément appelé un enfant douloureux. C'est ce que je disais. Il s'agit de la deuxième partie de l'attachement d'un élément au DOM. Parce que maintenant il dit, Ok, cool, on veut vraiment attacher cette paire au corps. Et nous avons défini notre jumelé en une variable appelée nouvel élément. Si nous gardons cela, nous l'avons littéralement fait. Si nous inspectons notre document, si nous inspectons ce document et nous allons à nos éléments ici, nous regardons dans le corps. C' est notre paragraphe. C' est génial ? Donc, nous avons littéralement maintenant édité notre balise de paragraphe sur le DOM que, quelques choses que je veux dire à propos de cette période de bande parce que nous ne pouvons pas le voir sur l'écran bougie, nous avons ajouté aucun goût. Alors comment on fait ça ? Bon, passons à la prochaine conférence. Je veux juste résumer ce qu'on a fait. Et puis je veux vous montrer comment nous ajoutons du texte. 24. Utiliser textContent() pour ajouter du texte à un élément: Première étape, représentons notre code dans un arbre DOM. quoi ressemble ? Eh bien, on y va. Nous avons vu comme avant, vous devriez être très familier avec ça. Nous avons commencé notre fenêtre, nous arrivons finalement à notre HTML. Il se divise en deux branches, la tête et le corps. Ce sont des enfants de l'élément HTML, la tête comme nous l'avons vu, et il a un titre et un style, et notre corps a une balise H1. Et nous avons inclus cette balise de script. Je ne me souviens pas vraiment dans cette balise de script que lorsque nous avons écrit notre JavaScript pour ajouter ce paragraphe au DOM. Alors voilà, l'arbre DOM de l'examen. Mais quelle était la prochaine chose que nous avons faite dans notre balise de script ? Tu te souviens de ce que c'était ? Tetrad, nous éditons cette balise de paragraphe. Laisse-moi te montrer à quoi ça ressemble. L' ego. Nous éditons littéralement cette balise de paragraphe. Oui. C'est de bonnes nouvelles. Nous avons littéralement ajouté quelque chose au DOM pour notre première fois, si bien fait. Et j'espère que vous pouvez voir que c'est assez intuitif et ce n'est pas si difficile. Mais je veux que nous parlions de cette balise de paragraphe et un peu plus de détails. Comme vous le savez, ces éléments de paragraphe nouvellement créés n'est pas très utile sans aucun goût. En fait, nous ne pouvions pas voir quoi que ce soit affiché à l'écran. Nous n'avons eu qu'à inspecter l'inspecteur des éléments afin comprendre qu'une paire de a été ajoutée au DOM. La troisième bonne nouvelle cependant, est que nous pouvons ajouter du texte en utilisant la propriété de contenu de texte. Mais comment cela prend le contenu correctement fonctionner l'aspect danger et comment le voyons -nous en action ? Laissez-moi simplement sauter rapidement à l'éditeur de texte et je vais vous montrer maintenant. Vous me connaissez maintenant, j'adore les exemples pratiques et nous venons dire que pour ajouter prend élément de temps des cheveux des éléments. En particulier, que nous pouvons utiliser cette propriété appelée contenu de texte. Voyons donc comment ça marche. Nous sommes dans le code que nous avons littéralement mis en place. Et je veux utiliser ceci prend la propriété de contenu. Comment on le fait ? Eh bien, la première ligne de code encore dans notre JavaScript, nous pouvons voir que nous avons créé une nouvelle variable appelée nouveaux éléments. Deck est notre paragraphe. Donc, si nous accédons à cette variable, nous pouvons accéder à une propriété appelée contenu textuel. Et c'est ce que je veux te montrer. C' est littéralement aussi facile et nous attribuons la valeur du contenu que nous voulons ajouter à une page. Dans ce cas, que voulons-nous faire ? Eh bien, je veux ajouter une paire et disons juste ou un fruit de votre imagination. Et si nous sauvegardons cela et boum, nous avons littéralement ce paragraphe dans notre navigateur. Mais ce paragraphe a l'air hideux, ne l'a pas lu à peine. Alors allons juste dans notre balise de styles ici, et commençons à coiffer ce paragraphe. Le jeu, nous pouvons réellement utiliser les mêmes calories perdues sur la taille de la police. On peut dire sur 36 pixels. Nous pouvons également changer la famille de polices juste pour être cohérent, est en fait un peu loin d'avoir fait tout cela et de le mettre sur le corps supérieur, ce qui aurait aidé. Mais de toute façon, ce n'est qu'une des nombreuses façons de le faire. Et faisons juste ce poids de police de boulon en gras. Fait. Comment ça a l'air ? Alors on y va. Nous avons un paragraphe avec éditeur pour le DOM et maintenant avec aussi modifier le texte était dans un élément de paragraphe. Sans espoir. Scientifique semble plus grand ici, console pour adoucir CS. Et ils, nous allons avec un G créé notre nouveau paragraphe que nous accédons ensuite cette propriété appelée prend du contenu pour ajouter du contenu à la page et savoir, vous le savez déjà. Retournons dans la conférence. Cool, on y va. Vous pouvez voir que ce n'était pas si difficile alors que Dan, et comme je suis crier est que la combinaison de l'élément de création et cela prend la propriété de contenu a créé notre nœud d'élément complet. Super, super excitant. Mais cette question qu'on me pose beaucoup de la part des étudiants et c'est, pourrions-nous pas utiliser dans le HTML au lieu de ce contenu de texte ? Et la réponse est oui, vous auriez pu utiliser dans le HTML. Rappelez-vous ce que je continue de dire dans ce cours qu'il y a plusieurs façons d'écorcher un chat, mais ce sont quelques inconvénients avec l'utilisation de HTML interne. En HTML exprime votre site deux script intersite possible ou XSS. Parce que JavaScript en ligne peut être ajouté à un élément. En d'autres termes, prend le contenu est tout simplement plus sûr car il supprime la balise HTML. C' est assez technique, alors ne vous inquiétez pas si vous ne comprenez pas ce que le script inter-site est un sujet d'une autre chose en soi. Pour l'instant, comprenez simplement que vous auriez pu utiliser en HTML. C' est juste en toute sécurité d'utiliser du contenu textuel, ce que nous avons fait. J' espère que vous avez appris une tonne dans cette conférence. Mais comme toujours, nous avons un long chemin à parcourir à bientôt. 25. La méthode appendChild(): J' aimerais qu'on discute d'un enfant douloureux et Annelida un peu plus de détails avant de passer à autre chose. Comme nous le savons, l'utilisation de cette méthode attache votre élément à un parent. Surtout, cependant, il ajoute toujours les éléments pour devenir l'enfant perdu de ce parent particulier. Dans l'exemple que nous venons de coder ensemble, nous avons vu que notre élément body dirigeait déjà le H1 et les éléments de script en tant qu'enfants. Et c'est pourquoi lorsque nous utilisons l'enfant de la douleur, je vais paragraphe balise a été ajoutée à la balise de script R à retenir. Donc, vous pourriez dire que ce paragraphe est le plus jeune enfant au cas où vous auriez obtenu milieu qui était Édition hors du script. Laisse-moi sauter rapidement sur la console et je te montrerai. Pour vous rappeler, voici opcode. Nous avons créé raphe apparent et ensuite nous avons fini ce paragraphe à notre élément corporel. Alors allons à la console. Examinons ce document. Allez dans l'onglet Eléments, ouvrez le corps et boom, Je vais paragraphe a été ajouté que l'enfant perdu l'appellera le plus jeune enfant à un parent de corps. C' est le comportement par défaut d'un enfant souffrant de douleur. Alors on y va. Nous venons de voir qu'un enfant de douleur et Zao élément ou douleur cet élément comme le plus jeune enfant au parent. Animations de serpent. Vous pensez peut-être à ce stade, les hommes, est-ce que je n'ai jamais le contrôle de la voie ? Je veux mettre cet élément nouvellement créé. La bonne nouvelle, c'est que tu as le contrôle. Nous avons plusieurs méthodes d'ajout d'éléments, tels qu'un enfant de douleur, que nous avons vu, insérer avant et remplacer enfant rencontre. Celle que je veux que nous regardions maintenant, c'est insérer. Avant l'insert effectuer la méthode est très simple. Un qui prend deux arguments. Le premier argument est l'élément que vous voulez insérer dans votre DOM. Dans notre cas, ce serait la balise de paragraphe. Le deuxième argument est une référence à la sœur, alias l'enfant du parent que nous voulons précéder. Le peu confus, ne pas insister sur le haut sur l'éditeur de texte. Et regardons cet insert avant la méthode. Je te vois maintenant. 26. La méthode insertBefore() - Exemple: J' espère que vous avez oublié et c'est génial. C' est vraiment, vraiment. Et maintenant, nous regardons comment utiliser insert avant. Alors rappelez-vous l'approche par défaut et je l'ai sur l'ennemi de l'éditeur de texte juste faire défiler un peu vers le bas et en zoom avant. C' est notre approche par défaut. Rappelez-vous que nous créons un élément, nous trouvons ensuite un parent, puis nous utilisons un enfant de broche. C' est notre bâton à retenir, Touchons maintenant notre gain à ce corps en utilisant un enfant douloureux. Donc approche par défaut, mais nous n'avons pas de contrôle se pencher sur le chemin. Nous voulons que ce nouvel élément soit placé. Donc maintenant, je veux que nous modifiions ce code et je veux que nous voyons comment insérer avant fonctionne. Donc, en d'autres termes, je ne veux pas qu'on utilise un emploi payant. Laisse-moi enlever ça. Et je veux dire, Ouais, cette fois, utilisons insert avant pour que nous puissions supprimer ce code. Et maintenant, comment cela fonctionne-t-il ? Est-ce que la première étape de cette méthode est de trouver le frère que nous sommes allés précéder. Nous voulons trouver l'endroit dans lequel nous voulons insérer une balise de paragraphe. Et disons que nous voulons insérer notre balise de paragraphe sur cette balise H1 et un cancer, ce sera avant cette balise de script. Est-ce que ça a du sens ? Actuellement, nous savons que notre paragraphe a été ajouté comme enfant très, très jeune, donc il a été ajouté après la balise de script. Plus, nous voulons que ce soit avant la balise de script. Donc, la première étape est de dire ici, trouvons le frère. Nous voulons continuer. Pour ce faire, définissons une variable appelée Inégalité, tout ce que vous voulez. Je vais juste l'appeler l'élément de script parce que nous savons que c' est l'élément que nous voulons insérer un paragraphe avant. Et bien sûr, vous connaissez toutes les méthodes d'accès maintenant, nous pouvons obtenir le script en accédant à un sélecteur de requête. Et nous savons que nous sommes après cette balise de script. Donc c'est plutôt cool. Ça colle l'un des deux. Maintenant, nous avons la deuxième instruction dans l'état deux, et qui utilise la méthode Insérer utiliser l'insert before. Comment on fait ça ? Rappelez-vous, j'ai dit que nous trouvons notre nœud parent, qui est à l'élément body. Nous accédons à sa propriété appelée insert before, qui prend deux arguments. L' un est le nouvel enfant, que nous avons défini comme nouvel élément, qui est notre balise de paragraphe. Le deuxième argument est l'élément que nous voulons poursuivre, auquel cas, oui, c'est l'élément de script. On y va. Et si nous gardons cela, j'espère que si tout va bien, ça devrait marcher. Alors ouvrons nos sites web. Vous pouvez voir que notre paragraphe est toujours là. Inspectons le document. Ouvrons ce corps. Et ils comme notre paragraphe, quel point c'est cool ? J' espère que vous l'êtes, et c'est tellement génial parce que maintenant nous avons placé notre paragraphe avant qu'ils balise script. Très, très cool. J' espère que tu t'amuses. 27. there une méthode insertAfter() ?: Avant de passer à autre chose, je veux juste mentionner quelques autres choses à propos de cette méthode d'insert effectuer. Le point de départ, comme toujours, est de dessiner l'arbre DOM. Alors on y va, on le sait. Et le comportement par défaut est que si nous utilisons un enfant de douleur à l'élément du corps, il va peindre notre paragraphe comme le plus jeune enfant. En d'autres termes, il va peindre ce paragraphe après cette balise de script. Parfois, en tant que développeurs, nous voulons plus de contrôle, n'est-ce pas ? Et dans notre exemple, nous voulions insérer leur paragraphe avant cette balise de script entre 81 et le script. Et comment on a fait ça ? C'est vrai. Nous avons appelé insert avant sur l'élément body dans spécifié que les nouveaux éléments, en d'autres termes, cet élément paragraphe doit être inséré avant nos éléments de script. Il y avait aussi simple et je pourrais penser, Ok, cool, c'est un peu bizarre parce que, pourquoi devrions-nous trouver le dernier frère et inséré avant ? Sûrement ? Sûrement, ils doivent être un insert souvent méthode, aussi bien. Comme il s'avère, n'est pas un insert après méthode. Je ne sais pas pourquoi. C'est comme ça. Et cela signifie qu'il n'y a pas de moyen intégré largement supporté d'insérer un élément d'un élément au lieu d'avant. Mais ne stress pas, nous pouvons tromper le navigateur en combinant la méthode insert before avec la méthode suivante frère. Qu' est-ce que cela signifie ? Eh bien, cela signifie juste que ce que nous faisons est d'insérer un élément avant cet élément supplémentaire que nous venons d'ajouter ? C' est un peu déroutant. Laisse-moi te montrer ce que je veux dire. Donc on a un corps, on a notre H1 et on a notre script. Et supposons que pour l'instant nous n'avons même pas de texte dans cette couverture un jour, nous avons littéralement juste une balise H1 vide. Dans ce cas, notre élément sera le seul et le prochain frère de ce H1 sera ce script, non ? Donc, tout ce que nous voulions faire, c'est que nous voulons insérer ce paragraphe avant le prochain frère H1. En d'autres termes, avant que cet élément de script à la scène pourrait encore se gratter la tête. Alors passons à la console et je te montrerai ça en action. 28. Tricoter la méthode insertBefore(): Je veux qu'on retourne à l'essentiel. Donc j'ai tout le code devant nous qui sont enlevés tout le reste. Et encore une fois, si nous revenons à notre navigateur, nous avons juste des LMR. Et c'est ce que nous avons. On n'a plus le jumelé. Ok, revenons à Visual Studio Code. Maintenant. Je veux que nous prenions du recul et réfléchissions à ce que nous voulons faire. Nous avons notre H1 et nous avons nos tags de script, non ? Et nous voulons ajouter ce paragraphe avant la balise de script ? Oui, nous pouvons utiliser la méthode insert avant. Mais parfois votre code devient si compliqué. Parfois, vous voulez réellement insérer quelque chose sur quelque chose. Et comme je l'ai dit, il n'y a pas d'insert sur la méthode, c'est pourquoi je veux que nous fassions juste un exemple rapide et rapide. Donc la première chose que je veux faire, c'est que, une fois que je veux attraper le corps et l'étiquette H1, c'est la première chose que je veux faire. Donc, listez définir une variable d'élément H1 comme notre balise H1. Et je vais juste utiliser les sélecteurs de requête. Et nous savons que c'est le 81. Et bien sûr, je peux faire exactement la même chose. Oui, mais je voulais trouver l'élément du corps. Et cela, bien sûr, va être l'étiquette du corps. Pour qu'ils passent très vite. Maintenant, je veux que nous trions l'insert avant la fonction. Maintenant, afin de tromper cela en fonction super complète, je veux créer un nouvel élément après l'élément. Et puis nous avons encore l'élément H1. Je vais te montrer ce que je veux dire. Donc, je veux définir une nouvelle variable appelée H1. C' est cool à l'élément suivant. Et je veux que nous ayons accès à notre élément H1. Et je veux appeler émis. Rappelez-vous la méthode de fraternité de l'élément suivant. Nous avons traversé cela, vous remarquez qu'il trouve les frères et sœurs de l'élément suivant. Je veux juste dire, oui, je pourrais juste utiliser la prochaine sœur. Je n'ai pas besoin d'utiliser les éléments suivants frère. Je veux juste partager davantage ce que je fais. Les éléments suivants frères et sœurs vont littéralement saisir l'élément suivant. Le frère et la sœur étant cette balise de script à ne le ramènera pas, il prend des notes. C' est la seule raison pour laquelle je l'ai fait. Maintenant, tout ce que je veux faire, c'est que je veux accéder à notre élément corporel. Je veux utiliser cet insert avant la fonction. Et rappelez-vous l'insert avant prend deux arguments. Le premier argument est notre nouvel élément que nous voulons mettre dans le DOM. Et le deuxième argument est ce frère de référence, auquel cas, oui, nous l'avons défini comme H1, élément suivant. C' est cool ? Aujourd'hui, nous allons, nous l'avons littéralement fait et je vais tirer à la navigation et je vais vous montrer que cela a réellement fonctionné. Mais il suffit de reprendre et de réfléchir à la raison pour laquelle c'est que nous voudrions le faire. Eh bien, la seule raison principale pour laquelle je l'utilise car parfois vous ne savez pas toujours ce que le prochain frère est dans votre code. Et c'est pourquoi nous le traitons avec un arbre. Prenez l'élément actuel sur lequel nous sommes, dans ce cas c'est la balise H1. Nous accédons ensuite à la méthode de fraternité suivante. Dans notre cas, nous utilisons les éléments suivants frères et sœurs que nous aurions pu utiliser Nick frère. Et puis nous traitons simplement la performance de l'insert en utilisant les éléments suivants Sir que nous venons de créer. Et puis Hertz semble bizarre, mais croyez-moi, et parfois vous aurez besoin d'utiliser cette voiture admise. Afin d'insérer un élément là où vous le souhaitez dans le DOM. Mais laissez-moi vous montrer que ça a vraiment fonctionné. Avant de passer à l'image suivante. Voyez comment on a eu ça. Allez dans le navigateur. Inspectons l'élément. Allons aux éléments. Il ouvre le corps et ils, nous l'avons. Notre paragraphe est inséré avant cette balise de script. En d'autres termes, cela est inséré après la balise H1. Donc, j'espère que vous avez appris beaucoup ARPU trouver ce plaisir et intuitif. Et je te verrai à la prochaine conférence. 29. Comment supprimer des éléments du DOM: Vous êtes venu de manière incroyable, incroyable. Vous savez maintenant comment créer des éléments et les ajouter au DOM. Et bien sûr, la dernière étape est maintenant d'apprendre à supprimer des nœuds du DOM. Et tout de suite, je veux juste dire que nous avons quelques méthodes à notre disposition pour supprimer des éléments du DOM. Le premier que je veux que nous regardions est appelé supprime enfant. Jetons un coup d'oeil à comment cela fonctionne. Bienvenue à ce code essayé et testé. J' espère que tu t'amuses maintenant qui apprendrait une tonne ? Nous savons maintenant comment créer des éléments et éditer dans le DOM. Bien sûr, nous devons apprendre maintenant comment le retirer. Et comme je viens de le dire, l'une des méthodes disponibles pour nous comme ce qui est connu sous le nom de supprimer les ensembles enfants. Quand je veux regarder maintenant, Nous voici, nous avons notre balise de paragraphe nouvellement créée. La première chose que je veux faire est que je veux ajouter ce paragraphe éléments au DOM pour me rappeler comment faire cela. Eh bien, d'abord en tant que police, tous les éléments du corps, nous accédons à notre document, ce QuerySelector. Nous attrapons notre élément corporel. Et bien sûr, nous accédons à nos éléments corporels. Et dans ce cas, nous ne sommes pas trop rapides sur la façon dont nous avons placé cette balise de paragraphe. Donc, nous pouvons simplement accéder à cette méthode enfant append. Et nous pouvons obtenir nos éléments. C' est simple. Si nous gardons ce jour, nous allons, nous avons un paragraphe ajouté au DOM. Et je sais que cela semble contre-intuitif, mais supprimons maintenant ce paragraphe du DOM. Et comment on fait ça ? Ça ne peut pas devenir plus facile que ce que je vais te montrer. Tout ce que nous avons à faire, c'est que nous devons accéder à notre nœud parent. Dans ce cas, c'est l'élément du corps. Nous devons alors accéder à l'une de ses méthodes. Et la méthode que nous voulons accéder au reste est appelée remove child. Et l'enfant que nous voulons supprimer est celui qui suit les éléments de paragraphe nouvellement créés. Donc, nous pouvons simplement supprimer l'élément. Et si je garde ça, regarde ça, elle est partie, elle est hors de ça. Nous avons littéralement supprimé un élément du DOM et pour vous le prouver, laissez-moi descendre le navigateur, écouter, parler ce document. Rendons ça un peu plus grand. Et vous pouvez voir ici, c'est littéralement notre étiquette de corps. Si nous ouvrons que l'apathie est une balise de paragraphe normale, nous l'avons littéralement retiré du DOM, si bien fait. Vous venez d'utiliser votre première méthode. Et je t'ai dit que ce n'était pas si difficile. Que, comme toujours, ces plus d'une façon de peau un chat. Et je veux mentionner quelques autres choses à ce sujet. 30. Utiliser parentNode avec removeChild: Comme je l'ai dit, je veux juste parler un peu plus de cette méthode remove child. La principale chose à noter est que nous devons appeler remove child du parent de l'enfant. Nous voulons supprimer. En d'autres termes, cette méthode enfant supprimée ne se déplacera pas de haut en bas de notre DOM pour trouver l'élément que nous voulons supprimer. Maintenant, disons que nous n'avons pas d'accès direct aux éléments parent, et nous ne voulons pas perdre de temps à le trouver. Que pouvons-nous faire ? Eh bien, nous pouvons toujours supprimer cet élément très facilement en utilisant la propriété de nœud parent. En d'autres termes, nous utilisons simplement la propriété de nœud parent. Et dans la propriété nette, nous accédons à la méthode enfant supprimée. Laissez-moi vous montrer ce que je veux dire. Bon, alors on y va. Voici notre code. Rappelez-vous que nous venons de le faire avant d'utiliser l'enfant remove sur un élément du corps. Que se passe-t-il si nous ne savons pas nécessairement ce que le parent est de l'élément que nous voulons supprimer. En d'autres termes, nous avions réellement défini l'élément corporel avec quoi ? Si on ne sait pas ce que c'est ? Eh bien, dans ce cas, comme je l'ai dit, nous pouvons accéder au nœud parent, puis supprimer l'enfant sur leur nœud parent. Comment ferons-nous ça ? Il s'avère que c'est super simple. Nous saisissons notre élément que nous voulons supprimer. Et c'est bizarre de commencer comme ça. C' est ce que nous faisons dans l'accès à sa propriété de nœud parent, ce qui nous donnera son parent. Et ce parent. Ensuite, nous disons, ok, cool, alors enlevons cet élément lui-même. Je sais que c'est un peu rond, mais c'est comme ça que nous devons le faire en utilisant cette approche. Si je sauvegarde ceci et que nous actualisons notre navigateur, nous ne devrions voir aucun changement. Rappelez-vous si je commente ce code, nous avons notre paragraphe sur le navigateur. Si je reprends cela, si je n'ai pas commenté et que nous sauvegardons le lecteur, ce littéraire supprime ce paragraphe de notre DOM. J' espère que ça deviendra plus intuitif. Il y a une autre chose que je veux juste discuter, mignonne. 31. La méthode Remove(): Très bien, avec des bactéries et je vais coder, on a juste regardé CG enlever l'enfant. Quelque chose que je dois mentionner cependant, parce que je n'utilise même plus enfant enlevé autant. Et la raison en est que nous mettons une façon très épaisse et très nouvelle de supprimer des éléments du DOM. Et cela nous est fourni directement sorti de la boîte à partir de l'API DOM. Quelle est cette méthode ? C'est super simple, c'est juste enlever à froid. Donc oui, on a, on vient de faire un exemple. Laissez-moi vous montrer comment fonctionne la fonction remove. Et il ne peut pas devenir plus intuitif et plus simple que cela. Tout ce qu'on a à faire, c'est le côté xy et on veut supprimer dans ce cas, eh bien, laissez-moi juste sauver ça. Ensuite, vous pouvez vendre paragraphe est dans le navigateur. Je veux l'enlever maintenant, tout ce que nous avons à faire est d'accéder à notre nouvel élément. Sur cet élément, nous avons tout droit sorti de la boîte et la méthode appelée remove. Et si je garde ça, boum, il est parti. C' était facile et intuitif ? Était ? Pourquoi ne pas commencer par simplement vous dire quelle était la méthode remove en premier lieu et nous pouvons même oublier la méthode child enlevée. Je ne sais pas freiner les deux principales raisons pour lesquelles je manquais de discuter de toutes les méthodes, y compris celles. Le premier est, il vous donne une compréhension plus intuitive sur la façon dont nous sommes arrivés là où nous sommes maintenant. Donc, en d'autres termes, cela nous aide juste à mieux comprendre notre code. Tu vas trouver une vieille carte aussi. Il a ces enfants enlevés et vous allez devenir comme quoi c'est ? C' est la première raison. La deuxième raison pour laquelle je ne l'ai pas mentionné au tout début est que les navigateurs prennent en charge la méthode remove est une très nouvelle méthode. Cela signifie donc que certains des anciens navigateurs ne le supporteront pas. Donc, si vous voulez être plus sûr, utilisez la méthode remove child. Si vous voulez que ce soit comme moi, nouveau agey, vous voulez en quelque sorte comprendre comment les anciennes approches fonctionnent, mais pas vraiment, elles restent avec la méthode remove. C' est ce que j'utilise. Et crois-moi, 95 % du temps, c'est tout à fait bien. Et la méthode remove, comme vous venez de le voir, était beaucoup plus intuitive et elle nous permet d'accéder directement à l'élément et simplement supprimer. Ça fait mal vraiment, vraiment simple. Mais surtout, quelle que soit la méthode que vous choisissez, ces deux méthodes nous permettent de supprimer un élément DOM, y compris ceux qui étaient à l'origine dans notre balisage HTML, pas seulement créé dynamiquement une fois que c'est important. Une autre chose qui mérite d'être mentionnée est l'élément DOM que nous supprimons a beaucoup d'enfants et de petits-enfants. Celles-ci seront supprimées aussi. Donc, il est une méthode assez dangereuse qui juste une sorte de frapper un point qui avant de commencer à tout enlever et puis découvrir que littéralement tout est supprimé. Alors on y va. Ensuite, vous avez un Tokyo qui s'amuse beaucoup. Et au fait, si vous vous demandez ce que sont ces boîtes, au départ, c'est Trek nous. C' est littéralement grillons de Noël partager. Je regarde le 22e vieil invalide trois jours avant Noël, mais j'adore tout ça et c'est rire général. Peut-être faire du tournage. Moi, continuez avec mon cours parce que quand j'ai rassemblé ça, tu sais, et j'adore ça, comme si j'avais vraiment aimé entendre signer. J' espère que ton Noël a été bon. Et je te verrai à la prochaine conférence. 32. Éléments de clonage: Je suis super excité à propos de cette section. Nous allons à nouveau à quelque chose que nous vraiment, vraiment génial. Quoi, excusez-moi, une constante parce que c'est vraiment cool. Je veux dire, encore une fois, je vais tous les jours d'un escroc gérer ça. Quel bizarre. Quoi qu'il en soit, je vais essayer de choisir là où on s'était arrêté. Ce que vous dites, c'est que ce lien va être sur le clonage, sur la réplication de choses. Que vous pouvez commencer par un unique et unique du genre. Donc ça va être super intéressant. Et le café ? J'espère que tu le feras aussi. Et il rejoint plus tard, asseyez-vous, détendez-vous et nous allons fissurer. Voir anonyme. Woo hoo. Cette section continue à obtenir WIDA. Et quand plus nous entrons dans ne le fait pas. Mais heureusement, nous à peu près dans la dernière section quand il s'agit de manipuler le DOM, la technique de manipulation DOM restante dont nous devons être conscients est celle qui tourne autour des éléments de clonage. Et par des éléments d'entraînement, je veux dire simplement créer des répliques identiques d'un certain élément. Mais ça devient bizarre ? C' est presque comme si tu pensais avoir une empreinte digitale unique. Et tout à coup, il a défini qu'il y en a plein d'autres à la même manière. Et cette empreinte digitale, votre empreinte digitale était unique. Et c'est toute l'idée du clonage. Très bien, le mur incliné, comment cloner est assez facile. Nous utilisons une méthode appelée noeud de clone sur l'élément que nous voulons répliquer ou cloner. Mais accroche-toi à tes chevaux. Il y a encore une chose que nous devons faire. Nous devons fournir à cette méthode un argument vrai ou faux. Et cela spécifie si nous voulons cloner uniquement l'élément, si nous voulons cloner l'élément et tous ses enfants. Si vous voulez cloner un élément ainsi que tous ses enfants, nous passons la valeur true dans cette méthode. Si vous voulez juste répliquer l'élément lui-même au niveau élevé, nous passons l'argument false. Et en ce moment, vous pourriez penser, Cool, comprendre comment ça marche, mais pourquoi voudrait-on jamais cloner quelque chose ? suffit de prendre du recul et de penser s'il y a un scénario dans lequel cette sorte de répétition sur votre site Web, alors le clonage serait bénéfique. Par exemple, disons que vous avez une liste ShoppingList dynamique Et chaque fois qu'un utilisateur ajoute un élément à la liste ShoppingList, il est ajouté au panier ou ajouté à une liste. Cette étiquette LI entière et tous les styles et les enfants que vous avez dessus. Si vous le faites, ce sera génial si vous pouviez simplement le cloner chaque fois que l'utilisateur clique sur le bouton Ajouter, n'est-ce pas ? Comme ça a du sens, C'est en fait assez intuitif. Mais à ce stade, vous vous grattez probablement la tête. Ne vous inquiétez pas, sautons dans la console et commençons à coder. Commençons à voir comment cette méthode fonctionne. Je suis super, super excité de te voir maintenant. 33. Clonage - Exemple: Très bien, il est temps de donner un exemple pratique. Donc, vous pouvez voir en arrière-plan que j'ai du code et de nouveau dans Visual Studio Code. Dépouille ça. J'ai juste un H 1.5 un paragraphe. Et si je te montre à quoi ça ressemble si on met notre écran ici, c'est ça. Simple, n'est rien d'autre. C' est tout ce que j'ai ce que je veux faire. Disons que nous voulons reproduire ce paragraphe. En d'autres termes, on veut juste ça, non ? Mais je ne sais pas, tapé statiquement dans le HTML. Je veux que cela soit ajouté dynamiquement, et je veux que nous clonions ce paragraphe. Comment pourrions-nous le faire ? Eh bien, c'est de ça que parle cette conférence. Alors allons y entrer. Permettez-moi de supprimer ces paragraphes. Et ici, nous avons un code de début tardif. La première chose que je veux faire est que je veux ajouter une classe à ce paragraphe. Et appelons un message de classe. On peut l'appeler comme on veut. Et maintenant, je veux que nous ajoutions notre JavaScript. Maintenant les deux choses que je veux faire. Tout d'abord, je veux définir où nous voulons mettre le paragraphe et nous voulons le mettre dans le corps, ne vous inquiétez pas. Nous voulons que ce soit un enfant du corps. Donc j'ai besoin d'un accès à notre élément de corps. La deuxième chose que nous devons faire, c'est que je dois définir ce que nous voulons escalader. Et dans ce cas, nous voulons cloner la balise de paragraphe. J' espère que ça a du sens. Donc, la première étape consiste à saisir notre élément de corps ainsi que l'élément que nous voulons serrer, qui est l'élément de paragraphe. Faire du sens ? Alors définissons notre élément de corps comme variable d'élément de corps. Et nous pouvons saisir cela de plusieurs façons. Nous avons vu comme vraiment dans le cours que vous devriez être un maîtrisé cela déjà. La première chose que nous devons faire est comme toujours, accéder à l'élément racine de départ de notre DOM, qui est cet objet de document avec notre réseau, nous avons une pléthore de méthodes à notre disposition. Les 10, 12 ans maintenant est le QuerySelector. Et bien sûr, nous voulons obtenir cet élément corporel. On va faire la même chose. Mais pour le paragraphe, appelons-le simplement élément para. Et encore une fois, nous avons commencé le document. Maintenant, nous pouvons utiliser le sélecteur de requête. Encore une fois, je veux mélanger les choses. Et c'est pour ça que je pensais y mettre un cours. Et comme nous le savons, il a une classe de message. Aujourd'hui, nous avons une dette. Notre toute première étape, la prochaine chose que je veux faire est que je veux exécuter une fonction. Et cette fonction va ajouter dynamiquement cette balise de paragraphe à notre page Web. Si vous ne savez pas quelles sont les fonctions, comment écrire dans la syntaxe démontre, j'ai un cours complet sur JavaScript et comment fonctionnent les fonctions. Si vous êtes intéressé, vous savez, donnez-lui un coup d'envoi. Sinon, pas de stress. Je vais écrire une queue avec toi quand même. Bon, alors commençons à définir notre fonction. Définissons notre, et appelons-le applications modernes disent quelle fonction qualitative nous voulons. Oui, nous utilisons le mot-clé function en JavaScript. Nous définissons alors le nom de notre fonction, qui est dire quoi ? Dans les deux accolades, c'est là que nous avons la viande de notre code. La première chose que je veux faire, c'est que je voulais trouver notre texte de clone. Définissons une variable appelée texte cloné. Et qu'est-ce qu'on veut cloner ? C' est vrai, nous voulons cloner notre paragraphe. Ne sommes-nous pas élément para était, sauf si l'élément nous pouvons maintenant accéder à notre méthode de clone Node. Rappelez-vous que dans la conférence précédente, je vais cloner la méthode Node. Et vous souvenez-vous de l'argument dont nous avions besoin pour fournir cette méthode ? Écrivons, nous devions fournir un booléen, soit vrai, soit faux. Que pensez-vous qu'on devrait mettre ici ? Je veux que tu penses à ça. Je veux que vous pensiez si nous devons mettre vrai ou faux dans cet argument ici, dans ce nœud de clone. Prenez du recul. Qu'est-ce qu'on clonait ? Clonage de ce paragraphe. Et le paragraphe est sous cette balise H1, n'est-ce pas ? Le paragraphe a-t-il des enfants ? C' est un peu une question piège et vous pourriez penser qu'il n'a pas d'enfants, auquel cas vous devriez mettre faux. Mais ce serait mal. Que je te montrerai le lendemain à toi pour l'instant. Il a des enfants. Il est en fait obtenu qui prend noeud comme un enfant. Donc, nous devons passer dans l'argument vrai. Alors on y va. À ce stade, nous avons littéralement cloné notre texte bit de droits impressionnants. De même que lorsque nous utilisons la méthode create element. Rappelez-vous comment il flotte juste dans le soleil tout seul de façon transparente. La même chose va arriver ici. Nous avons créé cet élément de goût de clone, ce paragraphe. Alors il flotte juste autour. On doit l'attacher à un parent. Et c'est exactement pour ça que nous avons dû créer cet élément corporel. Vous devez faire défiler un peu vers le bas pour que vous puissiez voir, nous y allons. Donc tout ce que nous avons à faire maintenant, c'est que nous devons accéder à notre élément corporel. Nous avons aujourd'hui des nouvelles, la méthode append child où nous n'avons pas à juste ce que nous allons faire ici. Et bien sûr, l'argument ou l'enfant que nous voulons ajouter est notre texte cloné. Ça n'a pas de sens. Mais à ce stade, si nous nous arrêtons ici et nous allons au navigateur, rien ne se passait pour nous et nous pouvons inspecter le document. Et nous pouvons ouvrir notre corps. Et vous pouvez voir que nous n'avons qu'un paragraphe. n'y a pas de deuxième alinéa. On n'a rien fait. En d'autres termes, nous n'avons pas exécuté de dysfonctionnement. Nous avons créé la fonction, mais nous ne l'avons pas exécutée. Et comment je veux faire ça ? Ou on pourrait juste exécuter la fonction en refroidissant, disons de l'eau ici. On peut retourner à notre navigateur, et on y va. Nous avons littéralement ajouté un paragraphe à notre alcalose DOM. Mais je veux le faire dynamiquement et je voulais continuer à se produire toutes les 1 secondes. Alors, comment ferons-nous ça ? Revenons ici à notre code. Et je veux utiliser maintenant une méthode intégrée DOM appelée intervalle sic. Donc, ici, nous allons utiliser un boulon dans la fonction DOM, qui d'ailleurs provient de l'objet fenêtre. Pour exécuter notre mot à dire, quelle fonction toutes les 1 secondes. Et la méthode que je veux utiliser est appelée intervalle de siège. Et juste un peu de mouche, beaucoup de gens, et si vous commencez à googling sit intervalle, ils pensent que c'est une méthode JavaScript. Ce n'est pas une méthode JavaScript. Il vient de l'objet fenêtre dans notre DOM à nouveau. Donc, voici juste un peu d'informations pour vous que vous pouvez publier à la prochaine époque de fête. Sit méthode intervalle prend deux arguments. Le premier argument qu'il prend est le gestionnaire. En d'autres termes, c'est la fonction que vous voulez exécuter. Nous voulons exécuter la, dire quelle fonction, n'est-ce pas ? Le deuxième argument est la fréquence à laquelle nous voulons que cette fonction exécute le délai d'expiration. Oui, nous voulons exécuter cette fonction toutes les 100 millisecondes, en d'autres termes, toutes les 1 secondes. Maintenant, si je garde ça et qu'on va dans notre navigateur, regardez ce qui va se passer. Ouais, ça te fait arrêter ça. Laissez-moi me rafraîchir. Regarde ce qui se passe. Une plaque tournante qui vous souffle. C' est cool ? Et si nous inspectons les éléments sur notre page et nous ouvrons ce corps est juste rafraîchit, paire à elle et recommencer. Avec nous. Regardez leur paragraphe ajouté à notre DOM. Dynamiquement. Whoo, C'est génial comme un homme adulte, années d' espoir Hampton excité que je suis littéralement manipuler le DOM à la volée. C' est automatique, déconcerte mon esprit. Je pense que c'est génial. Quelque chose que je veux vous montrer qui rapidement est que si nous revenons à notre code, si nous lançons la tête fausse comme notre argument ici, que pensez-vous qu'il se passerait ? Pensez-vous que le paragraphe serait ajouté au DOM ? Vous avez peut-être dit non, mais en fait le paragraphe est toujours modifié dans le DOM. Mais sans aucune intuition de Jordan, ce sont des enfants TXT. Il n'en faut pas, c'est un sens économique. Donc, si nous revenons à notre page maintenant, vous pouvez voir que notre page elle-même n'est pas mise à jour parce qu'il n'y a pas de texte dans le paragraphe. Mais si nous inspectons ce document et laissez-moi me rafraîchir. Vous pouvez voir dans votre console, dans votre DOM que le paragraphe est modifié toutes les 1 secondes. J' espère qu'il est logique que dans la prochaine conférence, je veux regarder ce code plus en détail et simplement résumer ce que nous avons fait. 34. Analyser notre code clone: Je veux que nous prenions juste un pas en arrière et comprenions ce que nous venons de faire parce que c'est un sujet tellement cool et intéressant fait et nominee d'autres tutoriels qui se trouvent sur les cours. Si un couvert ce genre de choses. J' espère que vous avez apprécié son plaisir brûlant. Mais de toute façon, le secret de ce qui se passe ouais, c' est dans notre code. En fait, on va mieux se produire. Et plus précisément, nous n'avons pas besoin de parler du H1 et le paragraphe fait un assez simple. Ce que nous devons faire, c'est que nous devons revenir dans notre balise de script. Et nous devons prendre un moment pour comprendre ce qui se passe. En haut, nous avons notre variable d'élément de corps. La première chose que nous faisons est de définir notre variable d'élément corporel. Et cela fait référence à l'élément body dans notre HTML. Assez simple. De même, nous définissons notre variable d'élément parent, puis référence notre élément paragraphe avec une valeur de classe de message n'est rien de trop spécial qui se passe ici, vous devriez être très familier avec cela. Voilà où les choses deviennent intéressantes et funky. Nous avons notre fonction de minuterie d'intervalle défini qui appelle la dire quelle est la fonction toutes les 100 millisecondes, toutes les 1 secondes. C' est à l'intérieur de ceci, dites quelle fonction où le clonage réel a lieu. Donc, vous pourriez dire que la partie la plus importante du code pour nous est ceci. Dis quelle fonction ? Comment cela fonctionne-t-il ? nouveau, nous définissons une variable appelée texte cloné. Et nous attribuons que la valeur de notre cloné éliminé. Afin de cloner un élément. Tout ce que nous avons fait, c'est que nous avons utilisé la méthode de clone Node sur notre élément de paragraphe. Le résultat de nous faire ceci est qu'une copie de notre élément paragraphe est maintenant créée et stockée dans le cadre de la variable de texte cloné. La dernière étape est pour nous d'ajouter notre nouvel élan aux dortoirs afin qu'il apparaisse. Souviens-toi, sans faire ça, c'est juste flottant dans le nom, c'est perdu. On doit l'attacher à un parent. Ça a du sens. Et c'est pourquoi nous accédons à l'élément parent. Nous utilisons ensuite cette méthode enfant de peinture, que nous avons vu dans les conférences précédentes. Et bien sûr, nous ajoutons le texte cloné à cet élément de corps. Et grâce à notre intervalle défini, tout le code sous le dire quelle fonction répète pour continuer à ajouter sont clonés élément à la page. Et bien sûr, la dernière chose que vous avez remarqué était que nous avons passé la valeur vraie ou fausse. Yaks, c'est le dernier exemple que nous avons montré, mais nous avons fait une pause true comme argument dans cette fonction de nœud de clone. Pourquoi on a fait ça ? Notre élément paragraphe ne semble pas avoir d'enfants, n'est-ce pas ? Eh bien, c'est là que la distinction entre les éléments et les nœuds entre en jeu. Notre balise de paragraphe n'a pas d'enfant ou d'éléments que le texte de la balise de paragraphe est en fait un nœud enfant. Plus précisément, un enfant prend nœud. Et ce détail est très important à garder à l'esprit lorsque vous trouvez un clonage doux et que vous ne vous attendez pas à voir ce que vous avez fait. J' espère que ça fait des scènes. Un hub est maintenant plus intuitif pour vous. Et surtout, j'espère que tu t'amuses. 35. Défi du cours final - Introduction: Je pensais que ce serait amusant d'avoir un autre exercice pour appliquer ce que vous avez appris. Vous pouvez voir ici en arrière-plan, j'ai une page très simple appelée animaux cool. Et en vertu de ça, j'ai plein d'éléments de la liste. Et ce que je veux que vous fassiez, c'est que je veux que vous réfléchissiez à la façon dont vous pouvez ajouter dynamiquement ces éléments de liste à la page comme je l'ai fait. Donc, je vais vous montrer le code et sont fournis dans la conférence. Vous pouvez télécharger un roman. Mais c'est le point de départ. Vous pouvez voir juste à un CSS très simple. Et si nous faisons défiler vers le bas, c'est là que le cœur de l'exercice entre en jeu. J' ai une étiquette 81 et une étiquette UL. Assez simple. Ensuite, j'ai un script R, j'ai notre JavaScript, Trouver un tableau appelé animaux. C'est ce que j'ai fait. Ce que je veux que vous fassiez, c'est que je veux que vous ajoutiez tous ces éléments dans cette balise UL dynamiquement. Avec JavaScript. Pouvez-vous comprendre comment le faire ? Vous savez comment accéder au DOM, vous savez comment créer des éléments, vous savez comment mettre ces éléments dans le DOM, lui donner une diode. Et dans la prochaine conférence, je vais vous montrer comment je l'ai fait. Ce n'est vraiment pas si difficile, mais il devrait juste renforcer ou dévier, avoir oui. 36. Défi du cours final - Solution: Tu lui as donné un coup de pouce ? Je l'espère. Et vous verrez ici à quel point c' est intuitif et facile une fois que vous comprenez toutes ces méthodes, c'est vraiment amusant. Alors allons y entrer. Quelle est la première chose qu'on doit faire ? Eh bien, essayons-le. Nous devons définir où nous voulons mettre cette balise LI dans laquelle nous allons créer. Rappelez-vous que nous avons mis attaché à elle apparente, dans ce cas notre parent est la balise alt. Donc, la première étape est de définir une URL. Appelons cela élément UL. Et nous pouvons littéralement le trouver. Nous pouvons lui attribuer une valeur. Oui, nous avons commencé à documenter. C' est la racine de notre page. Nous accédons à une méthode appelée QuerySelector et nous trouvons juste la balise UL. Là, nous l'avons. C' est la première étape. La deuxième étape que nous devons faire est de créer une balise LI. Nous devons ensuite ajouter des prises à cette balise LI, puis nous devons éditer à ce nouvel élément. Comment allons-nous faire ça ? Eh bien, d'abord, nous avons un tableau appelé animaux. Nous devons faire une sorte de boucle à travers ce tableau. Nous devons ensuite saisir chaque objet que nous traversons. Inclure cela comme prend à la balise LI, puis nous ajoutons cela à l'URL. J' espère que cela a du sens. Laissez-moi vous montrer comment notre saleté. Encore une fois, il y a plusieurs façons d'écorcher un chat quand, je veux dire, nous pourrions utiliser la boucle traditionnelle, je veux utiliser les quatre d'entre nous juste plus intuitif pour moi. Si tu ne sais pas ce que ça veut dire. Encore une fois, vous pouvez faire mon cours JavaScript. Vous pouvez simplement le Google. C' est très simple pour la boucle. Donc oui, tout ce que je veux faire, c'est que je veux définir un for of loop. Iterator est chaque élément du tableau. Et on va juste appeler cet animal. On peut l'appeler comme on veut de quel objet pendant que nous voulions faire une boucle à travers ce tableau appelé les animaux. Alors on y va. Chaque fois qu'il itère à travers ce tableau, il va nous renvoyer ce nom d'animal dans une variable appelée animal. C' est tout ce qu'il fait le code signifie et tout ce qu'il fait. S' il vous plaît, ne soyez pas intimidés. Tsunami. Sachez que chaque fois qu'il boucle à travers ce tableau, nous allons avoir ce nom d'animal dans une variable appelée animal cool. C' est cool. Mais quel est le premier pas ? La première étape est de créer notre élément de liste. Appelons simplement l'élément de liste. Comment créons-nous cela ? Rappelez-vous que nous avons commencé notre document. Nous accédons à une méthode appelée create method. Créer un élément, désolé. Et l'élément que nous voulons créer est cette attaque alliée. Jusqu' à présent, vous seriez d'accord avec moi que nous avons créé un tag allié, mais c'est vide. n'y a pas de goût. Et dans l'une des conférences précédentes, beaucoup plus tôt, nous avons discuté de la façon d'ajouter du texte à un élément nouvellement créé. Tu te souviens comment on a fait ça ? Écrivons nous accédons à une propriété sur l'élément appelé contenu de texte. Nous pourrions utiliser en HTML. Mais pour les attaques de script intersite, il est beaucoup plus sûr d'utiliser les prises de contenu. Alors faisons ça. Accédez à notre nouvel élément de liste. Nous voulons alors changer son contenu de prises, n'est-ce pas ? Et à quoi voulons-nous que cela soit égal ? À quoi voulons-nous attribuer ça ? Où nous voulons que ce soit le nom de l'animal. Et comme je l'ai mentionné, nous avons cette variable appelée animal à chaque itération de boucle. Alors on y va. Nous avons littéralement maintenant ou manipulé, prend du contenu. Quelle est la dernière étape ? La dernière étape est d'ajouter ceci à notre DOM, n'est-ce pas ? novices flottent tout seul dans l'espace. Nous devons éditer quelque chose. Oui, nous définissons l'élément UL comme son parent. Nous voulons accéder à la méthode de la douleur enfant, NGS. Nous sommes allés peindre ce que nous voulons ajouter cet élément de liste. Donc, nous l'avons là. Avant que je sauve, si je vais au navigateur, vous pouvez voir ici nous avons juste une rubrique appelée animaux cool. Je reviendrai au code Visual Studio ici et j'enregistre. Que crois-tu qu'il va se passer ? J' espère que ça a marché. Allons ici à notre navigateur. Et boum, l'IGA, c'est génial. Nous avons littéralement ce que nous voulions. J' espère que ça a du sens. J' espère que tu t'es amusé avec cet exercice. Cela a vraiment mis beaucoup des différents concepts que vous avez appris dans le cours ensemble dans la création de quelque chose de vraiment cool et amusant. Pendant ce temps, je suis très, très impressionné. 37. Cours Outro: Haut-parleur que vous avez un vendeur, n'est-ce pas ? Littéralement juste terminé un cours massif. Parler de manipuler la manière dominante, se déplacer avec l'ajout d'éléments HTML dynamiques. Allez, ça doit être excitant Walden sérieusement, tu as appris sur les nœuds. Vous avez appris que dans l'industrie du développement, nous considérons les nœuds comme une relation parent, enfant, frère. Et une fois que vous comprenez cela, ce n'est vraiment pas si difficile, il est assez intuitif de traverser sérieusement le DOM Walden, vous taper sur le dos et de ne pas tenir pour acquis ce que vous avez appris jusqu'à maintenant. Mais pour moi, c'est toujours une chauve-souris, n'est pas là. Nous n'avons pas tout à fait fini. Parce que dans les cours à venir, en fait, dans la toute prochaine défaite, nous allons maintenant parler d'un concept crucial dans le DOM et c'est les événements. Parce que souvent, vous ne voulez pas simplement créer quelque chose de statiquement. Vous voulez réagir à certains événements lorsqu'un utilisateur clique sur un bouton ou une veine, voulez-vous faire quelque chose lorsque vous utilisez un défilement avec la souris, quand un utilisateur exécute un événement key up, alors seulement vous voulez souvent faire quelque chose. Donc, avec cela dit, faisons une pause, prenons un café. Et dans la prochaine conférence, Commençons à parler des veines dormi sont appelées blanches.