Document 2023 – Teil 3: Manipulation und Durchlaufen des Dokumentenobjektmodells

1. Kurs-Einführung – Die DOM Manipulating: Willkommen zurück zu einer anderen Klasse. Ich bin super, super aufgeregt. Ich könnte einfach rauf und runter springen. Danke, dass du bei mir bleibst. Ich bin Clyde, ich werde dein Lehrer sein. Und diese Klasse ist eine Fortsetzung des Lernens über das DOM, das Document Object Model. Und mittlerweile wissen Sie, was das DOM ist, Sie wissen, wie Sie auf das DOM zugreifen können. Dass es bei dieser Klasse darum geht, das DOM zu manipulieren. Also oft, wenn man einmal in die Kuppel gelangt, innerhalb des kausalen, ist das nur die Ausgangspunkte. Der nächste Schritt besteht darin, sich innerhalb der kausalen innerhalb der Kuppel zu bewegen. Und in der Entwicklungsindustrie genannt Durchquerung des DOM. Also werde ich Ihnen zeigen, warum die Eltern, Geschwister, Kinder eines Knotens , wie man auf das DOM zugreift und sich darin bewegt. Es wird faszinierend sein und das ist sehr, sehr wichtige Dinge zu wissen, denn oft in Web-Apps möchten Sie Lage sein, dem Benutzer zu erlauben, löschen wichtigsten bestimmte Elemente hinzuzufügen. Sie müssen also wissen, wie Sie sich innerhalb des DOM bewegen können, müssen Sie das richtige Element anvisieren. Und natürlich spreche ich von Benutzern, die Elemente in einer Wave-App erstellen. Offensichtlich bedeutet das, dass wir ein Element innerhalb des DOM erstellen müssen. Das ist also, was dieser Kurs auch abdecken wird. Es wird IBEC sein. Vertrauen Sie mir, es spielt keine Rolle, welchen Grad der Codierung oder Erfahrung Sie haben. Du wirst etwas Neues lernen. Und mach dir keine Sorgen, wenn du nicht so bequem mit Code bist , den ich zusammen mit dir codieren werde. Wir werden viele Beispiele zusammen machen. Du kennst mich mittlerweile. Jedenfalls, genug Reden, genug Blöckchen, Blubber. Ich hoffe, Sie in den allerersten Vorlesungsvideos zu sehen. 2. Umsteigen um die DOM: Lassen Sie uns direkt in dieses tolle Thema eingehen und das DOM durchqueren. Indem wir durchqueren, meine ich nur, wie bewegen wir uns den DOM-Baum nach oben und unten? Wissen Sie, wie Familienstrukturen funktionieren? Du hast Eltern, deine Eltern haben Kinder. Und wenn sie mehr als einen haben, bedeutet das, du hast ein Geschwister, exzentrisch, cetera. Nun, wie sich herausstellt, um zu verstehen, wie man das DOM durchquert, und alles beginnt damit, zu verstehen, wie Familienstrukturen funktionieren. Aber natürlich reden wir hier nicht über buchstäbliche Familien. Wir reden über den DOM-Baum. Das passiert einfach so, dass unsere gesamte HTML-Seite auf die gleiche Weise funktioniert. Wie cool ist das? Und wie wir im vorherigen Abschnitt oder in einem der vorherigen Abschnitte gesehen haben, können alle Knoten im DOM als Eltern, Kinder und Geschwister ausgedrückt werden. Aber was soll ich meine? Nun, schauen wir uns das an. Denken Sie daran, dass Eltern, dieser Typ mit einem Bart, ein Elternteil eines beliebigen Knotens, nur der Knoten ist, der unmittelbar darüber platziert wird. Und wenn es darum geht, das DOM zu durchqueren, gibt es zwei Hauptmethoden, die wir verwenden können, um den übergeordneten Knoten zu erhalten. Die erste Methode ist der übergeordnete Knoten. Und die zweite Methode können wir dieses übergeordnete Element verwenden. Mach dir keine Sorgen, wie ich diese benutze, all die Unterschiede zwischen ihnen gerade noch. Moment möchte ich nur, dass Sie einen Schritt zurück auf einem hohen Niveau machen, um diese Konzepte zu verstehen. Das ist also unsere Eltern. Alles gut und gut, aber denken Sie daran, dass er zwei Kinder hatte oder was das Kind, das Kind eines Knotens ist der Knoten unmittelbar darunter. Und was interessant ist oder was Sie wissen müssen, ist, dass Programm oft auf Knoten bezeichnet wird , die über eine Ebene der Verschachtelung als abhängige Elemente liegen. Dies ist nur die Terminologie, die Sie in der Programmierwelt hören werden und es macht intuitiv Sinn. Also, das sind deine Kinder. Aber was ist, wenn wir Kinder in einer Familie betrachten? Nun, wir wissen, dass das jetzt Geschwister genannt wird. Geschwister eines Knotens ist ein beliebiger Knoten in der gleichen Baumebene wie dieser bestimmte Knoten. Und was interessant ist, ist, dass Geschwisterknoten nicht zur gleichen Zeit sein müssen. Was ich meine, Nun, das bedeutet nur, dass wir verschiedene Knotentypen haben können. Wir können Notizen verpflichtet haben, nimmt Knoten, 11 Knoten. All das können Geschwister sein, muss nicht gleichzeitig sein. Also da hast du es. Dies sind drei Arten von Knoten, die wir in jedem Familien-DOM-Baum haben. Wir haben Paranoide, wir haben Kinderknoten und wir haben Geschwisterknoten. Es ist nicht so schwierig fährt, wie Peering Fahrenheit, dies wird immer intuitiver. So, LET beginnen, jetzt näher zu kommen. Und ehrliche Gedanken codieren auch. Wir sehen uns in der nächsten Vorlesung. 3. Erstelle unsere Seite: In Ordnung. Kennst du mich? Du weißt, wie sehr ich das Programmieren liebe und deshalb möchte ich, dass wir einfach hineinspringen, wird es knacken. Alles, was ich jetzt tun möchte, um zu verstehen, wie man das DOM durchquert, möchte ich uns eine schöne Arbeitsvorlage einrichten, irgendwie cool es. Die Basis. Auf der linken Seite habe ich meinen Visual Studio-Code auf der rechten Seite sehen Sie, dass ich tatsächlich unseren Browser habe. So können Sie sehen, die Steifigkeit hat Fortschritte, die wir auf Mobbing machen, sind einfache Seite. Es wird sehr einfach sein, ein vielversprechendes. Es ist also die Basis. Ich möchte nur eine HTML5-Vorlagen erstellen. Es ist cool. Ich werde Titel dieses Dokuments und durchqueren das DOM, weil genau das ist, was wir tun. Ich ging nach draußen, um sehr einfach zu sein. Das erste, was ist, dass ich Code innerhalb eines Haupt-Tags und innerhalb dieses Haupt-Tags mieten möchte. Und wenn ich ein H1-Tag habe, das willkommen sagt wollen sie kein div-Tag darunter eindringen. Das ist eigentlich eine Idee von Rapa. Und innerhalb dieses div-Tags, Lassen Sie uns ein H2-Tag mit Krallen von sub haben, MSH2-Tag treffen und sagen Sie einfach das DOM durchqueren. Sehr einfach. Speichern Sie es. Herzlich willkommen. das DOM unter dem H2 durchqueren, lassen Sie uns ein Absatz-Tag haben, das sagt, wie machen wir es? Und unter dem Absatz-Tag können wir ein weiteres Absatz-Tag haben, das besagt, bleiben Sie herum. Und ich zeig's dir. Und wenn wir speichern, gehen wir und Updates in unserem Browser. Und es tut dies, weil ich Live Server verwende. Ich habe das schon mal durchgemacht, aber wenn Sie Fragen haben, posten Sie sie auf cunei, erklären Sie, wie das funktioniert. Also diese Angebote div Tag und ich lege nur Automotive, nimm es mit mir und dann sterben wir. Und ich ging ins Netz, um ein zweiter Wrapper zu werden. Und innerhalb dieses div-Tags, lasst uns einfach einen Witz des Tages haben. So können wir sogar eine Klasse namens Jerk haben. Und wir können sagen, dass wir den Tag abwichsen. Und der Job kann sein, zum Beispiel, wie nennt man Fisch ohne Augen? Und Antwort ist Fisch. Und kein sehr guter Witz. Aber das ist nicht der Zweck dieser Übung. Kühl oder Eis. Jetzt haben wir unsere grundlegenden Seiten. Eine, die ich tun möchte, ist Quickie Anleitung nach oben hier und fügen Sie einige CSS sehr schnell unter dem UCC-Titel hinzu, Lassen Sie uns einfach ein Style-Tag hinzufügen. Und ja, mit allen Elementen auf unserer Seite, Beginnen wir mit dem Styling. Erstens möchte ich, dass alle Elemente eine Grenze haben. Sagen wir einfach, wenn zwei Pixel in der Breite, kann es eine feste Grenze sein und es kann eine schöne Art von cool es gräuliche Grenze sein. Also, da gehst du hin. Ich habe gespeichert, wie Sie sehen können, wie das auf dem Bildschirm aussieht, nicht richtig aussieht, oder? Es wird Gebote bekommen. Jetzt möchte ich nur etwas Padding hinzufügen, um ein Padding von 15 Pixeln auf einem Rand von 15 Pixeln zu setzen. Mal sehen, wie das jetzt aussieht. Mit Blick auf, Ich schaue zu meinem Hosting ein paar zusätzliche CS bieten. Der Islam kann Ihre Seite großartig aussehen lassen. Es ist ziemlich cool. Und das Stil nur den Körper. Jetzt können wir ihm eine Mischung geben. Was ist, wenn ich keine 600 Pixel kenne? Wir können die Schriftfamilie ändern. Haben sie Sanserif, den Darm? Es sieht ein bisschen besser aus. Und lasst uns einfach eine Farboptik ändern und es einfach ein wenig ausräumen. Also, hier geht's. Das ist unsere Seite. Wie einfach war das? Ich sagte doch, ich werde nicht schwer werden. Und wenn wir unseren Code loswerden und wir nur unseren Browser betrachten, gehen wir los. Wir haben verschiedene Elemente, verschiedene Abschnitte, wir haben Wrapper. Und deshalb will ich hier Grenzen setzen. Weil ich wollte, dass du siehst, was ein Element vom nächsten definiert. Aber wir werden uns darauf einlassen, keine Sorge, Kate. Ich wollte das nur mit dir codieren. Ich hoffe, Sie können mit mir lesen und wie immer Spaß, Es gibt nur etwas, das ich schnell erwähnen möchte, bevor wir weitermachen. Dies ist zum anderen Bildschirm springen. 4. Warum müssen wir die DOM?: Ich weiß, dass wir das schon mal durchgemacht haben, aber ich möchte uns nur schnell neu betonen, weil es so wichtig ist. Erstens, die DOM-API ermöglicht es uns, alles mit Elementen und dem Inhalt zu tun. Und wir tun dies normalerweise über JavaScript. Wir wissen, dass wir zuerst einen Weg benötigen, um den entsprechenden DOM-Knoten zu erreichen. Es sind offensichtliche Routen, damit wir etwas tun können, wir brauchen eine Möglichkeit, darauf zuzugreifen. Und in den vorherigen Abschnitten haben wir diskutiert, wie wir die DOM-API verwenden können, um auf bestimmte HTML-Elemente zuzugreifen. Ja, wir verwenden die ID, die selektierte API, diese Klausel, den Tag-Namen. Es hat Spaß gemacht und es war intuitiv und Sie haben tatsächlich die meisten dieser Banane. Obwohl wir über diese Zugriffsmethoden gelernt haben, reicht es leider nicht aus. Wir brauchen noch ein bisschen mehr. Wir brauchen die Kirsche oben. Wir haben gelernt, dass das DOM als Knoten strukturiert ist, oder? Wir haben das gesehen. Und wenn man bedenkt, dass das DOM als Baum von Knoten strukturiert ist. Wir wollen oft Aktionen für Elemente ausführen, nicht unbedingt gemäß der ID oder Klasse oder Tag-Namen, aber die Beziehungen zueinander haben. Und das Schlüsselwort hier sind natürlich Beziehungen. Um dies zu tun, benötigen wir eine Möglichkeit, von einem Knoten zu einem anderen Knoten zu wechseln. Mit anderen Worten, wir brauchen eine Möglichkeit, das DOM zu durchqueren. Und darum geht es in diesem ganzen Abschnitt. Lehnen Sie sich zurück, holen Sie sich einen Kaffee und gehen wir hinein. 5. Die wichtigsten Objekte: Bevor wir weiter gehen, Es gibt nur etwas, was ich Ihnen darauf hinweisen möchte was am wichtigsten ist, wenn es um das DOM geht und Sie wahrscheinlich bereits wissen. Ich möchte es nur nochmals betonen, weil wir in den kommenden Abschnitten viel mehr Details und viel fortgeschrittener werden und nur Christie machen, schauen wir uns die ersten beiden Zeilen des R-Codes an. Lassen Sie mich eigentlich nur hineinzoomen, wenn wir sehen können, dass diese beiden Zeilen zuerst wir diesen Doctype haben, und dann haben wir dieses HTML-Tag, einen Kopf. Wir können diese ersten beiden Zeilen nehmen und sie mit dem König unseres gesamten Browsers kombinieren. Wir können dies dann in die drei wichtigsten Dinge aufteilen, wenn es um das DOM geht und drei Dinge auf das Fensterobjekt, das Dokument und das HTML benötigt . Und wir haben schon viel davon gesehen, aber wenn wir zu unserem Browser gehen und auf die Konsole zugreifen, dann lassen Sie mich einfach hier für Sie hineinzoomen. Was wir tun können, ist, dass wir solche Dinge tun können. Wenn wir uns wirklich so geneigt gefühlt haben, können wir eine Variable definieren, die globale Fensterobjekt genannt wird. Und wir können das zu einem Zeichen für das Wertefenster machen. Und dann können wir natürlich genau so auf dieses globale Fensterobjekt zugreifen. Und wir können es öffnen und wir können alle Eigenschaften des Fensters sehen. Wir wissen das, wir haben es gesehen, gesehen. Aber es ist sehr seltsam, dass wir es einer Variablen zuweisen, oder? Und das gleiche, was wir mit einem Dokument tun könnten, wir könnten es adenoid Document Mode nennen. Wir könnten das mit dem Ort des Dokuments zuordnen. Das ist sehr seltsam, nicht wahr? Wir machen diese Kodierung nie. Und der Grund, warum wir es nicht tun müssen, ist wegen unserer wichtigen das Fenster und das Dokument ist, dass das DOM uns einen einfachen Zugriff auf sie über Fenster und Dokument bietet. Diese sind in der Programmierindustrie als globale Melodien bekannt. Es bedeutet also nur, dass wir sie nicht explizit deklarieren müssen, wie ich es gerade getan habe. Sie können es einfach schütteln und es direkt aus dem Behälter verwenden. So können wir eigentlich nur helles Fenster. Und wir haben Zugriff auf die Eigenschaften des Fensters. Wir können Dokument schreiben und wir haben Zugriff auf die Dokumenteigenschaften. Was ist mit dem? Html? Lassen Sie ganz einfach, als auch zu bekommen. Wir können nur sagen, dass HTML, HTML-Element. Dann können wir auf unser Dokument zugreifen. Innerhalb unseres Dokuments setzen wir eine Eigenschaft namens Dokumentelement, und das ist das gleiche wie unser HTML-Code, wenn wir HTML-Element jetzt eingeben, HTML-Element. Da gehen wir hin. Als unser HTML haben wir unseren Kopf und wir haben unseren Körper gekauft. Und wenn wir die Leiche öffnen, ist es buchstäblich ein Gesetzeskodex. Also gehen wir hin. Kurz bevor wir weiter gehen, wollte ich Sie daran erinnern, dass die drei wichtigsten Dinge auf dem Fensterobjekt, das Dokument und das HTML-Element. Und diese sind sehr leicht vom DOM aus zugänglich, weil sie so wichtig sind. Cool. Und ich habe gesagt, ich glaube, du hast den Punkt. Lasst uns weitermachen. 6. Parent, und Geschwister: Wir fahren durch diesen Handgriff mag langsam erscheinen, aber glauben Sie mir, Sie werden ein absoluter Protest sein. Am Ende haben wir uns gerade unseren Doctype und unseren HTML angesehen, die ersten beiden Codezeilen. Jetzt fangen wir an, weiter zu gehen. Sobald wir unter diese HTML-Elementebene gehen, beginnt dom zu verzweigen und wird sehr interessant. An dieser Stelle haben wir mehrere Möglichkeiten, um unser DOM zu navigieren. Eine Möglichkeit, dass wir viel davon gesehen haben, ist die Verwendung von QuerySelector und Abfrage-Selektor, um genau die Elemente zu erhalten, die wir interessieren. Für viele praktische Fälle sind diese beiden Methoden einfach zu einschränkend. Warum werden sie einschränken können? Denn manchmal wissen wir nicht, wonach wir suchen. Und als Programmierer, wenn Sie im DOM navigieren, werden Sie sich ständig in dieser Position finden , die Sie nicht ganz sicher sind, wonach Sie suchen. Sie haben keinen CSS-Selektor. Ok, großartig. Also, was machen wir? Nun, was uns hilft, ist dies, zu wissen, dass alle unsere Elemente in der DOM-Gewohnheit mindestens eine Kombination von Eltern, Kindern und Geschwistern haben, auf die man sich verlassen kann. Lassen Sie uns das visualisieren. Wir haben gerade unseren HTML codiert. Lasst uns einfach auf den Bildschirm stellen. Das sollte sehr vertraut aussehen. Wir haben das nur zusammen gemacht. In der Tat, das einzige, was ich jetzt hinzugefügt habe, war, dass ich eine Kommentarnotiz hinzugefügt. Sie können sehen, dass ich bearbeitet habe, dies ist ein Kommentarknoten. Ich wollte die Dinge einfach ein bisschen kniffliger für uns machen. Schauen wir uns all unseren Code in unserem Körper an. Was können wir über dieses Haupt-Tag sagen? Lasst uns das nochmal zeichnen. Das Haupt-Tag ist irgendwie cool es auf der obersten Ebene. Und ja, wir ignorieren den eigentlichen HTML und den Körper selbst, der mit diesem Haupt-Tag beginnt. Unter diesem Haupt-Tag haben wir drei sehr breite Element-Tags. Lesen Sie nicht H1, das div und die Tiefe. So weit so gut. Wir können sogar tiefer in den Straßenbeton gehen. Wir wissen, dass wir die H 2 und die Absätze haben, und sie sind alle innerhalb der Dosis verschachtelt. So weit so gut. Aber jetzt möchte ich, dass wir uns die Familienbeziehung ansehen denn das wird uns helfen, zu beurteilen was uns wirklich voran und unsere Chorea bringen wird. Wie funktioniert diese familiäre Beziehung? Wie sieht es aus? Nun, wir wissen, dass dieses Hauptelement-Tag das übergeordnete Element ist. Was ist mit den H1- und den beiden div-Tags? Nun, das sind die Kinder. Und was ist mit darunter? Was ist mit all diesen H 2s und den Absatz-Tags? Nun, wir können Tag oder Geschwister streiten. Also, ja, wir haben es. Wir haben die Eltern, wir haben die Kinder unter den Kindern. Wir haben eine Menge von diesen P und H2S. Wir können irgendwie davon abhängen, was wir betrachten. Aber sagen wir einfach, sie sind Geschwister, die H2 und die P, Zum Beispiel. Machen wir einen Schritt beim Blick auf die Kinder. Weißt du, wir haben das H1-Tag, das in zwei div-Tags gesagt wurde, dass das Kinder sind, wenn wir sie nur isoliert betrachten. Wir wissen, dass sie auch Geschwister sein können. Und warum können wir sagen, dass Geschwister es tun? Weil sie das Hauptelement als übergeordnetes Element schattieren. Das H1-Element hat keine Kinder, aber die div-Elemente, haben sie Kinder? Das Alter 20 und p Elemente der Kinder der div Elemente, und alle Kinder der gleichen Eltern oder Geschwister als auch. Deshalb nennen wir diese Farbstoffe Geschwister. Aber der Punkt, den ich versuche zu machen, ist, dass genau wie im wirklichen Leben die Eltern das Kind und die Geschwisterbeziehung auf dem Weg in den Baum basiert , den wir sind und was sehen wir uns an? Fast jedes Element kann, abhängig von dem Winkel, mit dem wir uns angesehen haben, mehrere Familienrollen spielen. Sie selbst können ein Kind haben, in diesem Fall sind Sie der Elternteil. Die Doppelzellen können auch einen Elternteil haben, der Ihre Eltern, Ihre Mutter oder Ihren Vater ist. Ich hoffe, es macht Szenen. Ich hoffe, du hast Spaß, aber hör nicht auf. Wir haben gerade erst angefangen. Lasst uns in die nächste Vorlesung springen. 7. Eltern-Knoten: An diesem Punkt wissen Sie, wie wichtig es für uns ist, nach oben und unten zu gehen und Dawn, Sie bekommen eine Szenen, wie wir den Stammbaum lesen. Es ist ziemlich intuitiv. Und wir werden jetzt in eine praktischere Herangehensweise geraten. Wir werden uns ansehen, welche Methoden wir verwenden können, um direkt von der DOM-API aus zuzugreifen , um die Straße nach oben und unten zu bewegen. Es ist also super aufregend und ich hoffe, du hast Spaß. Ich habe auch diesen Kaffee. Sie können hier eine schöne, schöne, schöne Tasse Kaffee sehen. Oh, das hält mich am Laufen. Ich weiß nicht, warum es nur etwas um eine Tasse Kaffee geht, nur eine Tonne Pumps mich hoch. Also genießen Sie diese Nischen und lassen Sie uns hineingehen. Lassen Sie mich einen kurzen Schluck trinken und dann kommen wir in das Versprechen. Und ich bin, obwohl es ein wenig Kekse ist, werden Vermögenswert ist cool. Lasst uns reingehen. Um uns zu helfen, den DOM-Baum nach oben und unten zu bewegen. Wie ich bereits erwähnt habe, haben wir ein paar DOM-API-Meetings, die wir verwenden können, und Sie sollten anhand der Namen ableiten können, was sie tun. Was sind einige dieser Methoden? Wir haben neue Gesetzlose, untergeordnete Knoten, vorherige Geschwisterknoten, nächste Geschwister, Handkinder. Dies sind die wichtigsten Methoden, die wir verwenden werden , um auf DOM nach oben und unten zu durchlaufen. Und keine Sorge, fühlen Sie sich nicht eingeschüchtert oder überfordert. Wir werden uns im Kurs auf jede von ihnen einlassen. Aber genug gesagt, LAT beginnen zu sehen, was diese tun. Lasst uns wieder unseren Code hochziehen. Das haben wir getan, um es zu bekommen. Denken Sie daran, und der Ausgangspunkt ist dieses Haupt-Tag, das ist unser Wrapper für alles. Dies ist der Ausgangspunkt. Nun, für dieses Beispiel hier, möchte ich, dass wir dieses mittlere div-Tag ignorieren. Ich möchte, dass wir diese ID ignorieren. wir einfach so, als hätten wir es nicht. Ich möchte nur, dass wir uns das H1-Tag und das untere div-Tag ansehen. Und der einzige Grund, warum ich das tue, wie, wissen Sie, die Seite wird sehr chaotisch Faktoren zu bekommen, sind mehr und mehr Elemente. Ich will nur, dass wir uns diese beiden mit NSAID-Leads ansehen, sie herausziehen. Wie sieht es aus? Wir wissen, dass wir die Leiche unter der Leiche haben. Wir setzen das Haupt, unter dem Haupt-Tag, wir setzen die 81 und das div. Und innerhalb des div mit dem, was das H2 und das Absatzelement. So können wir es abbilden. So können wir das DOM malen. Und das erste, was ich möchte, dass wir uns den Ausgangspunkt ansehen, ist mit den Eltern. Das ist richtig. Und wie gesagt, der Name selbst gibt es weg und es ist ziemlich intuitiv. Nehmen wir an, wir beginnen ganz unten in unserem Baum, dem H2 und dem Absatzelement. Wir wissen, dass die übergeordneten Knoten, wenn wir die Methode Elternknoten auf diesem H2-Element eingeben, werden wir zurückgegeben werden. Was? Wir werden zurückgegeben, sein Elternteil ist das div-Element, macht Sinn, macht Sinn. Und ebenso mit dem nächsten Level haben wir das H1-Element, wir haben Entwicklung. Sie übergeordneten Knoten oder das Hauptelement. Und natürlich können wir genau das Gleiche mit Maine machen oder aus. Bevor wir weiter gehen, möchte ich, dass wir uns nur ein Beispiel für die Verwendung der übergeordneten Karte ansehen. Nehmen wir an, wir stecken auf dem H2-Tag fest. Nun, es gibt derzeit Weg, wie wir alle in unserem Code, wie greifen wir auf Eigenschaften auf den Urgroßeltern von H2 zu? Das ist nicht das übergeordnete Element, nicht das übergeordnete Element des Elternteils. Dass die Urgroßeltern-Körper-Tag, wie kamen wir den ganzen Weg nach oben, wenn wir auf dem H2-Tag sitzen, wie sich herausstellt, ist die Antwort darauf ziemlich einfach weil wir Eigenschaften und Methoden miteinander verketten dürfen. Lassen Sie mich Ihnen zeigen, was ich meine. Lass uns zur Konsole springen oder sogar schreiben. Man Armee wurde diesen Film gesehen. Erinnern Sie sich auch Ace Ventura als Kinderdetektiv genannt. Dann wird er immer alles Recht sagen. Hdfs, Sir. Und wie geht's dir heute Nachmittag? Alles in Ordnung, dann habe ich ein Paket für dich. Jedenfalls. Wir sind hier. Und das Beispiel, das wir betrachten wollen, wie wir bereits erwähnt haben, ist, dass wir an diesem H2-Tag sitzen und auf das Eigentum des Körpers zugreifen wollen. Und um unseretwillen, sagen wir einfach, wir wollen die Hintergrundfarbe auf dem gesamten Körper in Blau ändern . Wie würden wir das tun? Gehen wir zu unserer Konsole und beginnen, dies in Aktion zu sehen. Und Sie können hier sehen, dass ich es seit unserem letzten Beispiel nicht einmal berührt habe. Also lassen Sie mich einfach diese Konsole klar und ordentlich. Und jetzt fangen wir an, zu sehen, wie der übergeordnete Knoten funktioniert. Erstens, was ich tun möchte, ist, wenn wir auf die Registerkarte Elemente gehen und wir uns diesen Körper ansehen, und wir öffnen unseren Haupt-Wrapper. Ich will zu unserem H2 und das versuche ich zu tun. Er hat unser H2. Also, wenn wir auf natürliche Membran klicken, eine der vorherigen Vorträge, Ich habe Ihnen gesagt, was das gleich ist, gleich Dollarzeichen bedeutet. Nun, da wir uns entschieden haben, können wir zu unserer Konsole gehen und aufhören. Sagen wir einfach mal h, h2 entspricht Dollar dort. Und wieder, also wenn ich es nur auf den Bildschirm tröste, können wir sehen, dass wir heißen Witz des Tages H2-Element haben. Bisher. So gut. Wenn wir auf diesem Element sind und wir auf den übergeordneten Knoten zugreifen, denken Sie daran, was werden wir bekommen? Das ist richtig. Wir werden das gesamte div bekommen, das diesen Code umschließt. Erinnert sich. Ich hatte keine Ahnung von einem schnellen Zahn, das ist sein Elternteil. Aber ich erwähnte in der Vorlesung Was ist wirklich cool über diese Methoden spezifisch, wir können sie verketten, weil denken Sie daran, dass wir den ganzen Weg zum Körperelement bekommen wollen. Also fangen wir an, unseren Weg zu arbeiten. Absolutes existieren der übergeordnete Knoten, und jetzt können wir auf seinen übergeordneten Knoten zugreifen, dieser div Wrapper. Was gibt uns das? Nun, das ist richtig, es gibt uns dieses Hauptelement. Wenn wir zu unserem Codierungs-Editor gehen, warum dann dann? Denken Sie daran, dass wir beim H2-Tag angefangen haben. Sein übergeordnetes Element ist das div. Und dieses div hat Geschwister. Gehen wir zu einem, der das div hat. Das sind Geschwister. Es ist nicht sein Elternteil. Es ist Elternteil ist dieses Hauptelement dieses Hauptelements. Und die Eltern der Hauptelemente, Hayek ist der Körper. Ich bin sicher, dass du es überhaupt schon erraten hast. Wir müssen X-Y-Z machen, was wir gerade getan haben. Weißt du was? Anstatt es neu zu schreiben, gebe ich Ihnen einen schnellen Prototyp. Sie können den Aufwärtspfeil auf Ihrer Tastatur drücken und dann nur den letzten Code-Teil, den Sie geschrieben haben. Und so, anstatt uns zu schreiben, und wieder, können wir einfach auf den Pfeil nach oben klicken. Und jetzt wissen wir, dass dies uns das Hauptelement gibt. Alles, was wir tun wollen, ist auf seine Eltern zuzugreifen. Und Boom, Chaka LaCa, wir kommen zu dieser Leiche. Wie verursacht. Also wollte ich Ihnen nur zeigen, wie wir tatsächlich den ganzen Weg hinauf unser DOM durchqueren können , um zum Ausgangspunkt zu gelangen, der dieser Körper ist. Und bevor wir tatsächlich fertig sind, ja. Und ändere die Hintergrundfarbe zu blau, ich habe meine Meinung geändert. Ich dachte, weißt du was? Ich möchte, dass du es selbst probierst. Aber dieses Mal möchte ich, dass wir beim ersten div-Tag beginnen. Also, wenn ich zurück zu der Codierung es in ihn, Ich möchte, dass wir bei diesem ersten div Tag beginnen und ein 12 Sie zu schnell jetzt, pausieren Sie dieses Video. Ich möchte, dass Sie versuchen, auf das Körperelement zuzugreifen und die Farbe, den Hintergrund, die Farbe, die ganze Seite zu ändern , um diese zu produzieren , geben Sie es einen Kerl. Es spielt keine Rolle, ob du es nicht kriegen kannst. Das ist, was ich ja bin, Volleinheit Owens überprüft auf Einheit und es wird diesen Kurs in keiner Weise beeinflussen. Ich möchte nur, dass du lernst und ich möchte, dass du diesen Kurs voll ausnutzt. Also pausieren Sie das Video und ich werde es loslegen. Und dann werde ich euch in den nächsten Sekunden zeigen, wie man eine Schule macht, damit ihr sie jetzt pausieren könnt. Ok, fertig. Ich hoffe, du hast es ausgesucht. Wie ich bereits erwähnt habe, möchte ich bei diesem div-Element beginnen. Geh einfach zurück zu unserer Konsole. Lass uns alles klären. Der erste Tipp ist, ich möchte, dass wir auf den Rest zugreifen. Ich sagte, ich möchte starten, Datum und verwenden wir könnten es einfach in unserer Konsole direkt eingeben. Aber ich möchte, dass wir Schritte zu diesem Ansatz machen, denn als Programmierer müssen wir logisch sein. Und Sie werden sehen, dass es viel einfacher ist, logisch Kinder eine lange Codezeichenfolge zu schreiben , anders als das zu sehen. Also, wie machen wir das? Also lassen Sie uns sagen, lassen Sie dv gleich was? Nun, in diesem Fall wissen wir, dass wir unsere DOM-Zugriffsmethoden verwenden können , damit wir auf unser Dokument zugreifen können. Welchen werden wir benutzen? Dieser Betrag? Wir können ein paar gebrauchen. Es hat eine ID von Rapid, nicht wahr. Also könnten wir verwenden, und ich werde nur Git-Elemente verwenden, Elemente nach Tag-Namen, Nano, den Tag-Namen, den er div hat. Und wie gesagt, ich wollte, dass wir die allererste Aufnahme verwenden. Okay, Also, wenn eine Konsolenprotokollanalyse, stellen Sie sicher, dass die richtige, und da gehen wir, es ist das richtige Ende, weil es eine ID von Rapa hat. Wir hätten „get“ -Element nach ID verwenden können. Es gibt viele Möglichkeiten, ein Katzenkorn zu häuten, aber was wollen wir jetzt tun? Nun, jetzt wollen wir auf die Großeltern zugreifen und lassen Sie uns eine Variable namens Großeltern definieren. Und der Großeltern, der beim div beginnen wird. Wir müssen seinen übergeordneten Knoten bekommen. Dann müssen wir seinen übergeordneten Knoten bekommen. Also Impfstoffe. Also beginne ich irgendwie an den abgeleiteten Elternknoten, die das Hauptelement sein werden und sein übergeordneter Knoten wird der Körper sein. Wenn wir das zurückgeben und mit der Eingabe der Großeltern, sie gehen wir, wir haben das Körper-Tag. Wie cool sind wir? Und ja, lassen Sie uns einfach genau das tun, was wir tun mussten. Wir greifen auf die Stileigenschaft zu und ändern die Hintergrundfarbe zu blau. Kleber muss in String-Notation sein. Entschuldigung. Da gehen wir. Whoo, das hat einen Freund gebracht, der scheußlich in die Augen hat. Aber wie auch immer, ich hoffe, Sie hatten Spaß in diesem Vortrag, Herbizid fühlen sich intuitiver über Eltern des Knotens. Es ist in Ordnung, oder? Und es ist intuitiv. Wir haben uns gerade vom unteren Teil des DOM-Baumes den ganzen Weg nach oben gearbeitet. Es ist nicht so schwierig, endlich zu erscheinen. Wir sind noch nicht fertig. Ich möchte zurück zu unseren vorherigen Zeilen springen, die wir wollen. Und ich möchte, dass wir anfangen, in mehr dieser Methoden zu graben. Siena. 8. Vorherige und nächste Geschwister: Ich habe Spaß. Das ist, wo wir vom letzten Mal aufgehört haben. Wir haben uns den übergeordneten Knoten angesehen und ein Hub wird intuitiver. Das ist also Eltern, das ist der übergeordnete Knoten. Jetzt möchte ich, dass wir uns die Geschwister ansehen, die Rivalitäten der Geschwister. Und wieder, fangen wir ganz unten in unserem DOM-Baum, dem NH2 und dem Absatz an. Wir wissen, wenn wir am H2-Tag beginnen, dass die nächste Geschwistermethode uns den Absatz zurückgibt. Wie ich im vorherigen später erwähnt habe, sind die Wörter selbst, die Methodennamen so intuitiv, wie Sie wissen müssen, was sie tun werden, bevor ich es erkläre. Und wenn wir am Absatz-Tag beginnen und wir wollen zurück zum H2-Tag. Ja, die Methode wird als früheres Geschwister bezeichnet. Dasselbe, wenn wir eine Ebene oben im Baum sind, beginnen wir bei einem, gehen zu den Derivaten das nächste Geschwister. Und natürlich, wenn Sie ein div hinzufügen und 81 zurückgegeben werden möchten, können Sie einfach die vorherige Geschwistermethode aufrufen. Ehrfürchtig. Also, das ist wieder Geschwisterbett. Du kennst mich Mann, ich liebe es, auf praktische Beispiele zu schauen. Also lasst uns schnell zur Konsole springen und einen Blick darauf werfen, wie wir nächste Geschwisteruntätigkeit nutzen können. Sehen Sie jetzt, ich dachte, das wäre ein brillanter Ort für uns, um schnell zu pausieren und zu schauen, wie frühere Geschwister funktionieren. Also, was ist ein Beispiel, das wir tun können? Nun, schauen wir uns dieses Absatz-Tag hier an. Okay, wenn ich tatsächlich ausgewählt wir in diesem Absatz, Nehmen wir an, wir wollen auf den Witz des Tages zugreifen, seine Geschwister, seine vorherigen Geschwister, und wir wollen diese Hintergrundfarbe zu blau ändern. Wie würden wir das tun? Hier drin ist etwas, das dich überraschen könnte. Also lasst uns zur Konsole gehen. Und wie wir in früheren Vorträgen gesehen haben, können wir unseren Absatz einfach durch das aktuell ausgewählte Element in unserem DOM definieren , indem wir das Dollarzeichen 0 verwenden. Wenn wir nun definieren und versuchen, auf das vorherige Geschwister zuzugreifen, können Sie bereits in der Konsole sehen, dass es nicht zurückgegeben wurde. Dieser H2-Witz des Tages, der zurückgekehrt ist. Das nimmt zur Kenntnis, was ist damit los? Nun, während Stress werden voran springen. Wir werden uns im Detail mit den Unterschieden zwischen früheren Geschwistern befassen. Und wenn wir versuchen, auf und andere Elemente zugreifen, werden Sie hier dieses vorherige Element von Geschwistern sehen. Das sind zwei verschiedene Dinge, sehr nah, aber sie sind anders. Und eine der Nuancen früherer Geschwister ist, dass es auch alle Arten von Knoten enthält, nicht nur Elementknoten. Wenn wir also schauen, was der Text tatsächlich ist, können Sie hier sehen, dass es eine Rückkehr ist, es ist ein Zeichen. Also, wenn wir es schließen, der Grund, der passiert, wenn wir hier zu unserer Konsole gehen, diese tatsächlich Rückgabe-Anweisung nach dem H2-Tag, um zum Absatz zu gelangen. Lassen Sie mich Ihnen zeigen, dass ich nicht nur Müll rede. Wenn ich alle Zeichen zwischen den beiden Tags lösche, sollte das funktionieren. Gehen wir zurück zu unserer Konsole. Lassen Sie uns auffrischen. - Hier. Fangen Sie wieder an. Also lassen Sie P gleich dem aktuell ausgewählten Element, dem wir wissen, ist der Absatz. Und jetzt, wenn wir auf frühere Geschwister zugreifen, sollte das funktionieren. Erlesene Weine funktionieren nicht. Er wurde nicht definiert, tut mir leid. Also lasst uns auffrischen. Ich muss es sogar noch einmal einreichen. Also lassen Sie uns unseren Absatz wählen. Es geht auf die Konsole. Jetzt können wir es tun. Lassen Sie p gleich $1. Und jetzt können wir auf seine früheren Geschwister zugreifen, wie wir es letztes Mal getan haben, aber jetzt haben wir keine zusätzlichen Leerzeichen oder Zeichen dazwischen. Wir trafen Return und Tag gehen wir mit buchstäblich bekam diese Klasse der Freude und wir haben die H2. Das ist genau das, was wir wollten. Und um es Ihnen zu beweisen, können wir darauf zugreifen. Ändern Sie in Stil, Hintergrund, Farbe zu Blau. Da gehst du. Home Küste Sinn machen, wenn Sie unsicher sind, was ich gerade getan, Sie machen sich keine Sorgen, wir werden später für jetzt in sie bekommen. So funktioniert frühere Geschwister. Wir sehen uns in der nächsten Vorlesung. 9. Kinder, firstChild und lastChild: Ich bin aufgeregt und genieße das Zeug. Ich würde eine Zwei lieben. Wir haben uns nur Sublinks angesehen, wir haben gesehen, wie diese funktionieren. Wir haben uns Methoden vor Geschwistern angeschaut. Erinnern Sie sich, was wir angeschaut haben, wir haben Eltern angeschaut, aber was ist die Liebe jedes Elternteils? Das ist Verrottung. Lass uns ein paar Kinder haben. Eltern lieben ihre Kinder. Und du denkst vielleicht, dass das genauso einfach wird wie die anderen. Und lassen Sie mich Sie warnen, es ist nicht, wenn es anfängt, zwei Kinder zu bekommen. Wir haben viele Methoden zur Verfügung, und einige von ihnen, wie, Sie wissen, haben intuitiv wie die anderen, aber es ist okay. Dafür bin ich hier und das werden wir uns ansehen. Erstens möchte ich, dass wir zunächst die ersten zweiten untergeordneten Methoden betrachten. Okay, wie funktioniert das erste zweite Kind? Erstens ist die Syntax der Methode erste untergeordnete und verlorene Arbeit. Und erste untergeordnete Eigenschaften beziehen sich auf übergeordnete erste und letzte untergeordnete Elemente. Lassen Sie mich Ihnen zeigen, was ich meine. Beginnen wir mit diesem div-Tag. Wie funktioniert das Alter, um es zu beziehen? Nun, wie Sie erraten können, ist das das erste Kind des div. Wenn wir uns das Absatz-Tag ansehen, wie Sie vermuten, ist es das verlorene Kind des div. Betrachten wir es wieder aus der Sicht der Hauptelemente. Es ist das erste Kind ist ein 20 GHz, es ist verlorenes Kind ist das div-Tag. Aber was ist jetzt mit diesem Körperelement? Hier können wir sehen, dass der Elternteil, dieser Körper hat nur ein Kind. Bereitschaftsfall. Es ist nicht so schwierig. Wir können ableiten, dass das erste Kind und das verlorene Kind auf genau das gleiche Element zeigen. Was ist mit Element hat kein Kind? Sieh dir unser H1-Tag an, hat keine Kinder, oder? In diesem Fall werden diese Eigenschaften null zurückgeben. So wird das erste Kind und das verlorene Kind zurückkehren. Nun, an diesem Punkt denkst du vielleicht, Mann, das ist super einfach. Bass. Das knifflige im Vergleich zu den anderen Eigenschaften, die wir bisher gesehen haben, ist das Kindereigentum . Dies ist nur ein wenig kniffliger, aber wieder, mit ein bisschen Übung und ein paar praktischen Beispielen, werden Sie sehen, dass es nicht so schwierig ist, wenn Sie auf die kinder-Eigenschaft eines Elternteils zugreifen, Sie erhalten im Grunde eine Sammlung von untergeordneten -Elemente, die das Elternteil hat. Macht es Sinn? Und denken Sie daran, wir haben uns die Zugriffsmethoden im DOM angesehen, als wir das verkauft haben. Einige dieser Methoden wie getElementsByClassName, getElementsByTagName, sie sind Sammlungen umgewandelt. Hier ist es das Gleiche. Aber wie wir in früheren Vorträgen gesehen haben, als wir getElementsByTagName, Klassenname, et cetera, et cetera, et cetera. Obwohl diese Sammlungen wie ein Array aussahen, waren sie kein echtes Array. Also bedenken Sie das. Diese Last sieht aus und fühlt sich an wie ein Array. In diesem Fall, wenn wir auf die kinder-Eigenschaft zugreifen, ist es kein echtes Array. So können wir den Sammlungsprozess durchlaufen oder einzeln auf den Trojaner zugreifen, genau wie wir es in unseren Beispielen sehen werden und wie wir es zuvor getan haben. Und wenn ich schnell, die Überzeugung zurück, um uns von dieser georgischen Eigenschaft hat , dass automatische Links Eigenschaft, die uns sagt, wie viele Elemente sind in der Sammlung. Und dann erlaubt es uns natürlich, durch sie zu schleifen. Wenn sich dein Kopf gerade dreht, mach dir keine Sorgen, wir werden programmieren und bald sehen, wie das alles aussieht. Also lassen Sie mich Ihnen einfach eine Art von anderen kurzfristigen Immobilienarbeiten zeigen. Aber dieses Mal möchte ich an der Spitze beginnen, den Körper betrachten und wir schauen uns seine Kinder an und sagen, dass wir auf dieses Hauptelement zugreifen wollen. Oder du hättest es tun müssen, wenn wir mit der Leiche anfangen. Wir werden existieren. Es ist Kindereigentum. Und um das erste Element in der Sammlung zu erhalten, genau wie ein Array, greifen wir von seiner Indexnummer darauf zu. Und wir wissen in JavaScript und vielen anderen Sprachen und der DOM-API, das allererste Element im Array beginnt an Position 0. So schwierig ist es also nicht. Was ist jetzt, wenn wir dieses H1-Tag bekommen wollen und wir das Hauptelement hinzufügen, wie würden wir das tun? Wieder beginnen wir mit dem Hauptelement. Wir greifen auf die untergeordnete Eigenschaft zu und greifen auf das erste Element in diesem Array zu. Es ist intuitiv. Und mit dem div wissen wir, dass das sein zweiter Job ist. Also greifen wir auf das Hauptelement zu, wir greifen auf seine kinder-Eigenschaft zu, aber dieses Mal greifen wir auf das zweite Element im Array zu, was uns natürlich diese Entwicklung zurückgeben wird. Natürlich können wir genau den gleichen Prozess mit dem H2 und der P tun, Aber dieses Mal der Wiederverwendung der Taube als Ausgangspunkt, um die Kinder fertig zu werden, Es macht Szenen. Aber jetzt möchte ich wirklich in die Konsole springen. Dies ist ein wichtiges Thema für uns zu meistern. Ich werde es jetzt sehen. 10. Kinder – Beispiel: Die Arbeit mit Kindern bedeutet, Ja oder Nein herauszufinden. Denkst du auch in der realen Welt? Aber, weißt du, es ist, es ist das gleiche mit dem DOM. Kinder können schwierig sein, das kann hartnäckig sein, und sie denken, sie wissen alles. So wie auch immer, damit werden wir es zu tun haben. - Ja. Und ich möchte, dass wir ein bisschen Zeit mit Kindern verbringen. Sie werden also sogar in der nächsten Vorlesung sehen, die wir näher eingehen werden. Ja, ich will nur irgendwie, weißt du, ich dachte, lass uns einfach von den Folien wegspringen, die wir gerade betrachten. Und schauen wir uns hier einige praktische Beispiele für die Arbeit mit Kindern an. Also lass mich mich einfach loswerden, damit du Beta Adios sehen kannst. Und schauen wir uns diesen Körper an. Ich möchte, dass wir uns das Körperelement selbst ansehen. Also gehen wir zurück zu unserem Texteditor hier. Ich möchte dieses Körperelement betrachten und möchte seine untergeordnete Eigenschaft betrachten. Wie viele Kinder sollte es haben? Es könnte eine kleine Trickfrage gegeben haben. Es hat nur eine direkte untergeordnete Eigenschaft, das Hauptelement. Okay, also gibt es unseren Texteditor. Und was wirklich cool ist, bevor ich hier beginne zu codieren, ist, dass der Körper direkt auf dem Dokumentobjekt selbst zugänglich ist. So können wir einfach sagen, dass Lean Body Kinder dem Dokument Body Element und mit on net zugewiesen werden . Denken Sie daran, was eine Achse, die wir auf die Kinder zugreifen wollen, verpassen Sie es. Und denken Sie daran, dass zurückgegeben. Das ist richtig. Es gibt eine Auflistung aller untergeordneten Elemente zurück. Wenn wir also Return drücken und wir die Konsole ausloggen, erhalten wir eine HTML-Sammlung. Wir wissen wirklich, was eine HTMLCollection ist. Also, wie cool ist das? Oder füge hinzu? Deshalb müssen wir die Grundlagen erlernen, weil alles aufeinander aufbaut. Und wir können sehen, dass diese Sammlung aus zwei Elementen besteht. Mach dir keine Sorgen um das Drehbuch. Dieses Skript ist mein Live-Server, der automatisch vom Live-Server injiziert wird damit dies für alle praktischen Zwecke direkt aus meinem Visual Studio-Code ausgeführt Wir haben nur ein Element in dieser Sammlung und das ist dieses Hauptelement. Denken Sie daran, was ich gesagt habe, dass die HTMLCollection irgendwie wie ein Array ist, weil es irgendwie wie ein Array ist. Wir können auf die vollständige Methode zugreifen und wir können tatsächlich alle Elemente im Array durchlaufen. Also sagen wir, wir wollten tatsächlich eine rote Grenze um das Körperelement haben. Wie würden wir das tun? Nun, wir können einfach eine einfache for-Schleife verwenden. Also für ich gleich 0, ich weniger als. Denken Sie daran, wie wir gesagt haben, dass der Körper Jordan eine Länge Eigenschaft hat , so dass wir direkt darauf zugreifen können. Und natürlich, jede Iteration, die wir erhöhen wollen I. Das ist sehr einfach. Du wirst wissen, wie man das macht. Dies ist nur eine einfache for-Schleife. Was wollen wir bei jeder Iteration tun? Werden wir auf sein Kind zugreifen? Dies sollte also sagen, dass das Kind dem Wert von Körperkindern zugewiesen ist. Und je nachdem, wo wir in der Schleife sind, wird es dieses spezifische Kind zurückgeben und immer tun wollen, ist, dass wir diesen Stil Grenze ändern wollen, sagen wir einfach fünf Pixel, festen Farbverlauf. Da gehen wir. Lass uns das machen. Macht das Sinn? Also lasst uns zurückkehren. Und Boom, wir haben es gerade geschafft. Wir haben einen tollen Job gemacht. - Ja. Also gehen wir hin. Wir haben auf die Leichenkinder zugegriffen. Wir haben es durchgeschliffen. Und ich weiß, dass es nicht viel Sinn gab, sich durchzuschleifen , weil wir eigentlich nur einen Gegenstand hatten. Die Hauptsache, ich möchte nur irgendwie, ich möchte, dass Sie ein intuitives Gefühl dafür bekommen, wie wir Loops und Kinder und HTMLCollection verwenden können . Ist es die Heiligen Voreingenommenheit 100, nicht ganz getan. Es gibt noch eine Sache, die ich Ihnen jetzt zeigen möchte, das war eine Art einfaches Beispiel intuitiv, das etwas anderes ist, das ein bisschen weniger intuitiv sein könnte, könnte ein bisschen eine Trickfrage sein. Was ich tun möchte, ist, dass wir auf unser H1-Tag zugreifen. Glauben Sie, dass die Kinder des H1-Tags? Gehen wir zurück zu unseren Textdaten, um dieses H1-Tag zu betrachten. Sieht willkommen. Gibt es irgendwelche Kinder dieses H1-Tags wird intuitiv, würden Sie denken, nicht. Denken Sie daran, wo das Diagramm ist, keine Kinder, und Sie wissen, Sie würden erwarten, dass es für Kinder null ist. Nun, schauen wir uns unsere Konsole an, ob das der Fall ist. Spoiler-Alarm, ist es nicht. Aber wie auch immer, lassen Sie uns mit dem Zugriff auf dieses H1-Tag beginnen. Wie machen wir das? Auch hier können wir jede unserer DOM-Zugriffsmethoden verwenden. Also beginnen wir mit dem Zugriff auf die Wurzel unserer Webseite, die das Dokument auf dieser Wochenend-Achse Atlas, Dora, von verschiedenen Zugriffsmethoden ist. Ich werde nur noch einmal getElementsByTagName verwenden, weil wir wissen, dass wir nur ein H1-Tag in unserem Dokument haben. Wir gehen, wir haben unsere 81. Ich kann es sogar für dich aussperren. Sie können sehen, es ist eine HTMLCollection und Nissan jeder. Toll, also haben wir die H1 Leitungen jetzt Achse seiner Kinder Eigentum. Wie gehen wir, wie würden wir das tun? Nun, ich möchte tatsächlich das H1-Element in einem Orbit-selbst verlassen, nicht diese Sammlung. Also, wir greifen jetzt auf die Sammlung zu, ich möchte das erste Element in dieser Sammlung und dann lassen Sie uns auf seine untergeordnete Eigenschaft zugreifen. Was würden Sie erwarten, zu sehen? Wir hier haben wir eine HTMLCollection mit nichts drin. Und das ist intuitiv. Das würden wir erwarten, oder? Wir haben gesagt, dass das keine Kinder hat. So cool. Alles ist gut und gut, aber was ist, wenn wir das erste Kind und verlorenes Kind verwenden? Was würde dort passieren? Vielleicht denken Sie daran, auch erwartet, dass sie nichts enthalten. Also mal sehen, mal sehen. Also greifen wir auf H1 zu, das erste Element in dieser Sammlung, und jetzt möchte ich, dass wir auf das erste Kind zugreifen. Wenn wir das zurückgeben, bekommen wir diese Begrüßung nimmt zur Kenntnis, war Schläge dein Verstand. Also hat dieses H1-Tag tatsächlich ein Kind und das Kind ist der Geschmack selbst. Es ist dieser willkommene Geschmack. Und weil es nur ein Kind nimmt Kind, würden Sie erwarten, dass es die gleiche sein, wenn wir schreiben verlorenes Kind, wenn in der Nähe von ja. Und es ist das Gleiche. Und Augustus ist das Bit, das ein bisschen weniger intuitiv ist, ist, dass das erste Kind und verlorene Kind jede Art von Kind-Knoten zurückgibt, einschließlich nimmt Notizen, dass, wenn wir auf die Trojaner-Eigenschaft zugreifen, es gibt nur uns beseitigen Knoten. Das ist, warum das eine leere Sammlung gegen erstes Kind und verlorenes Kind zurückgab, die uns tatsächlich den Geschmack zurückgab. Sie sich keine Sorgen über die Unterschiede zwischen dem ersten Kind und den Kindern. Wir werden vorerst in die Schulen einsteigen, um es zu verstehen. Etwas anderes, das interessant ist, ist, wenn Sie nur wollen, dass die Elemente eine andere Eigenschaft machen. Also diese Achse, unser H1 erstes Element in dieser Sammlung. Und anstatt erstes Kind zu tippen, können wir über das erste Element Kind sprechen, das intuitiv das erste Element und das Kind dieses bestimmten Elements zurückgibt. Und weil wir wissen, dass es keine Elementuntergeordneten hat, wird es null zurückgeben, was wir erwartet haben und was wir zuvor auf den Folien gesehen haben. Wir haben viel getan und danken Ihnen, dass Sie bei mir sind. Und ich musste unterschreiben, um das Zeug zu verstehen. Schwierigkeit. Und je mehr Sie damit arbeiten, desto intuitiver ist es. Ich will nicht, dass das einschüchtert. Es sollte dir das nicht gemeistert werden, keiner von euch hat Spaß. Und weil Kinder so wichtig sind, möchte ich, dass wir einfach über Kinder diskutieren und epische mehr Details macht einige wirklich, wirklich cool und interessante Dinge. 11. Kinder und Nachkommen: Wie ich bereits erwähnt habe, sind die Kinder so wichtig, wenn es darum geht, mit dem DOM zu arbeiten, dass wir ein bisschen mehr darauf verweilen müssen. Wir wissen, dass Kinder nur Elemente sind, die direkt unter einem anderen Element verschachtelt sind. Aber lassen Sie uns einen Schritt zurück gehen. Und HTML-Element kann viele Ebenen anderer Elemente darunter verschachtelt haben. Und alle diese verschachtelten Elemente werden als Nachkommen unseres Startelements bezeichnet. Und in unseren vorherigen Beispielen haben wir sogar gesehen, dass es eine ganze Menge netter zu den Elementen unten gibt, sagen wir unser Körperelement. Aber dieser eine besondere Art von Nachkommen und dieser räumliche Nachkomme ist ein Element, das eine nette Teamebene unterhalb eines gegebenen Knotens ist. Und es nennt sich ein Element. Und ein untergeordnetes Element, das wichtig ist, kann immer nur ein Elternteil haben. Wir wissen, dass alle Geschmack in Ihrem HTML ist auch ein Takes Knoten im DOM, ein x, y. und wir verkauften in Art von eigenartigen nuancierten, wenn wir auf unsere H1-Tag schauten, was wir sagen können, ist der Elternteil, als wir versuchten, auf sein erstes Kind und verlorenes Kind zuzugreifen, dachte, dass es null zurückgeben würde. Wir sahen, dass es tatsächlich zurückgekehrt nimmt sich, weil das dauert , ist ein Kind, es ist ein nimmt Kenntnis von dem eines der Eltern, wie es Sinn macht. Die andere Sache, die erwähnenswert ist, die SEC, haben wir eine Vielzahl von Methoden zur Verfügung , die es uns ermöglichen, auf Kinder und Kinder Eigenschaften zu schauen. Wir haben einige davon gesehen, aber die, die ich jetzt auf diese kalten Kinderknoten und Kinder konzentrieren möchte. Schauen wir uns die Unterschiede zwischen diesen Methoden an. Untergeordnete Knoten und untergeordnete Knoten Lasst es uns hier auf unseren Bildschirm ploppen. Und schauen wir uns die Unterschiede an. Erstens, wenn wir untergeordnete Knoten verwenden, wird es eine Knotenliste zurückgeben. Und denken Sie daran, dass wir bereits zuvor in unserer Natur durch die Knotenliste gegangen sind. Wie kühlt bei einer ungeordneten Liste kann jede Art von Knoten enthalten, richtig? Denken Sie daran, so dass wir wissen, dass der Zugriff auf Punkt untergeordnete Knoten zurückgibt oder Knoten Kinder einschließlich Textknoten. Während, wenn wir uns die kinder-Eigenschaft betrachten, wissen wir, dass das in der HTML-Sammlung zurückgegeben. Wir wissen, dass wir auf die Punkt-Jordan-Methode für jedes Element zugreifen können , weil es eine Eigenschaft eines Elements ist. Und nur Kleidungsstücke haben dieses Kindereigentum. diesem Grund wissen wir, dass diese untergeordneten Elemente alle vom Typ Element sind , das nur einen Elementtyp enthält. Und net ist der größte Unterschied zwischen untergeordneten Kenntnissen und Kindern in untergeordneten Knoten des Netzes gibt eine Knotenliste von jedem Typ von Knoten mit der Child-Methode zurück, auf der anderen Seite, wird nur einen Elementknoten zurückgeben. Ja, du hast uns wegen der Titeltheorie erraten. Lassen Sie uns zum Texteditor springen und ich möchte ein Beispiel durchlaufen, das Ihnen den Unterschied zwischen diesen beiden zeigt. 12. Kinder gegen childNodes – ein Beispiel: Im Moment möchte ich, dass wir untergeordnete Knoten gegen Kinder Mackay bezahlen, der gibt eine neue Liste zurück, dass man eine HTMLCollection zurückgibt. Wir haben das gesehen, aber schauen wir uns dieses zwei praktische Beispiel schnell an. Also lasst uns sie aufnehmen. Dies ist unser normaler Code, den wir zusammen gemacht haben, den wir durch diesen gesamten Abschnitt auf einem Test gemacht haben, um diesem Code nicht mehr hinzuzufügen. Insbesondere möchte ich, dass wir eine Liste hinzufügen. Lassen Sie uns ein ungeordnetes Listen-Tag hinzufügen, lassen Sie uns drei Elemente haben. Artikel eins, und wir werden zwei weitere Gegenstände machen, Punkt 2 und Punkt 3. Da gehen wir. Lasst uns das retten. Und lasst uns auf unsere Website gehen. Wir können hier sehen, wir haben Artikel 1, 2 und 3. Wir haben uns gerade hinzugefügt. Das ist die Konsole klar. Sie können sehen, dass ich das in Echtzeit mache. Übrigens, das ist genau der Code, den wir letztes Mal aufgehört haben. Lassen Sie mich einfach die Seite in der Konsole aktualisieren. Also hier sind wir eine leere Leinwand. Will erstens, ich möchte auf diese untergeordneten Knoten schauen. Schauen wir uns das zuerst an. Also lasst uns unsere u packen, unsere Ruten sind ungeordnete Liste. Wie können wir das tun? Nun, in vielerlei Hinsicht werde ich nur das verwenden, das wir kürzlich verwendet haben, und es ist getElementsByTagName. Auch hier ist der Tag-Name die URL. Wir wissen, dass wir nur ein UL-Element in unserem gesamten Dokument haben. Es wird also eine HTMLCollection mit einem Element darin sein. Und ich möchte diesen Artikel einfach direkt existieren. Deshalb greife ich auf das erste Element zu. Und Amy, und das sollte unser UL-Tag sein, wenn wir jetzt auf untergeordnete Knoten zugreifen. Was denkst du, wird der Link zurückgeben? Es wird nur drei Artikel zurückgeben, Punkt 123. Nein, es ist nicht alles, was ich versuche zu machen. Rest- und Kind-Knoten gibt eine Knotenliste zurück, was bedeutet, dass es den gesamten Text enthält und die Bremsen und Rückgaben in unserem Dokument tragen wird. Deshalb sind es, wenn wir es öffnen, tatsächlich sieben Gegenstände. Also ja, es hat unsere drei LI-Tags. Da ist der eine, da ist der zweite, der dritte. Dazwischen wissen wir, dass wir diese Renditen haben. Also, wenn wir diesen Text öffnen, können wir sehen, dass der Knotenwert eine Rückkehr ist und es sind alle Leerzeichen. Wir gehen zurück zu unserem Texteditor. Es ist buchstäblich die Rückkehr. Und all die Räume. Macht es Sinn? Auf der nächsten Folie, wie würden wir zum Beispiel alle diese Elemente durchlaufen und die Hintergrundfarbe ändern? Nun, lassen Sie uns die Schleife vorerst beiseite legen. Was wir tun könnten, ist, dass wir auf das erste untergeordnete Element zugreifen konnten und nicht gewinnen konnten. Was soll ich damit meine? Will mich sparen wollte das erste LI-Tag zu lesen ändern. Was wir tun könnten, ist, dass wir mit unserer ungeordneten Liste beginnen. Wir können auf das erste Element Kind zugreifen. Wir können dann offensichtlich diese Hintergrundfarbe aufstylen und wir können diese gleiche Rate zum Beispiel machen. Also gehen wir hin. Das ist eine Möglichkeit, dies zu tun, aber das ist ziemlich umständlich, spielt keine Rolle, weil wir immer nur auf einen Artikel zugreifen können. Hier greifen wir auf das erste Element Kind zu, nicht auf das erste Kind. Denken Sie daran, das erste Kind gibt auch Art von jeder einzelnen Art von Nerd Intuiting, die dauert, Das ist, wie wir auf den ersten Elementknoten zugreifen. Wie können wir also eine Schleife verwenden? Irgendwelche Ideen? Will, auf diese Weise können wir Kinder benutzen. Denken Sie daran, ich wollte untergeordnete Knoten vergleichen, die wir uns angesehen haben. Und ich möchte Kinder, Kinder Returns und HTMLCollection vergleichen . Und wir wissen bereits, dass eine HTMLCollection nur aus Notizen bestehen muss . Also lasst uns das machen. Lassen Sie uns jetzt definieren Sie, Ich werde Kinder als die URL. Jetzt möchte ich auf das Kindereigentum zugreifen. Macht es Sinn? Wenn wir diese Konsole ausloggen, können wir nur bestätigen, bevor wir unsere for-Schleife codieren, dass dies jetzt eine HTMLCollection mit nur drei LI-Tags zurückgibt. Und wie wir uns durch diese Wand bewegen, genau wie eine normale for-Schleife, frage ich mich, ja, lassen Sie mich das einfach als Vorlage Stuhl für LET I gleich 0 Körperkinder verwenden, aber jetzt sind es keine Körperkinder. Wir haben unsere Variable als UL-Kinder definiert und wir wissen, dass sie eine Längeneigenschaft hat. Woher wissen wir, dass es eine Längeneigenschaft hat? Werde ich das öffnen und Ihnen zeigen, dass es eine Längeneigenschaft von drei gibt. Wir wissen also, dass wir unsere Schleife bei 0 beginnen wollen. Wir wollen weitermachen, bis es auf die Länge von drei trifft. Und jede Iteration wollen wir natürlich unser Hoch um eins erhöhen. Dann wollen wir, dass es tatsächlich auf jedes LI-Tag zugreift. Und wir wissen, dass die LI-Tags die Liste ungeordneter Liste Kinder sein werden und wird darauf zugreifen, und was wir jetzt tun wollen. Ok. Wir können das behalten, lassen Sie es uns einfach zu einem blauen Rand machen. Und wir haben die Rückkehr getroffen. Kind ist nicht definiert, es tut mir leid. Das ist die X-Achse. Wieder, es ist kein Kind, es ist am Leben. Das sollte jetzt funktionieren, Hit Return und die Strenge, die wir gerade durch jedes LI-Tag durchlaufen haben. Wie cool sind wir? Ich weiß, du denkst uns an dieser Stelle in einer Spaltung, kompliziert, aber extrahiert. Keine Sorge, wir werden die kurzen praktischen Seiten in diesem Kurs erstellen und wir werden immer weiter fortgeschritten, Sie werden sehen, dass alle diese sich gegenseitig ziehen. Wir wissen jetzt schon wieder mit HTMLCollection-Knotenlisten. Wir haben dies in einem vorherigen Abschnitt durchgemacht, also sollten Sie mit, wie cool angebracht ist vertraut sein. Das macht wirklich Spaß, wenn es DOS wie ziehen aufeinander, wir sehen die praktischen Effekte. Also wie auch immer, lassen Sie uns weitermachen. Ich will nicht aufhören. Wir sehen uns in der nächsten Vorlesung. 13. Challenge – Intro: Weißt du, wofür es wieder Zeit ist? Das ist richtig. Es ist Zeit für einen Vorgeschmack. Stellen Sie Ihr Wissen auf die Probe. Ich liebe es. Also, was ich jetzt tun werde, etwas Ungerechtigkeit, geben Sie den Geschmack der Frage. Das nächste Bild, offensichtlich werde ich durch das Beispiel mit Ihnen gehen, also bitte versuchen Sie es auf Ihre, auf eigene Faust. Keine Sorge, sie werden eingeschüchtert, sollten einfach Spaß machen. Und ich denke, du kriegst es. Ich denke, Sie, Ihre Schriften zu Mathe, um zu verstehen, wie es zu tun. Also lassen Sie es zusammen schneiden und es wird literarisch und ein paar Sekunden dauern , während ich tun will, ist ein einfaches HTML-Tag zu erstellen. Innerhalb eines Tags möchte ich, dass wir eine ungeordnete Liste in unserem HTML haben. Offensichtlich müssen wir eine Leiche haben, oder? Dies ist eine gute Praxis darin, ich möchte, dass wir eine ungeordnete Liste haben. Wir können sagen, das sind meine coolen kleinen Listengegenstände. Also das EEG, wir können das einfach aussagen. Und ich will nur fünf Listen haben. Werde ich wollen? Und das kann Gegenstand eins sein. Richtig? Dies kann Punkt zwei sein. Artikel drei. Artikel für einen Artikel fünf, da gehst du. Und das ist eine Tautologie. Es wird nur ein paar Sekunden dauern. Was ist Ihr Auftrag? Wird meine Idee Studenten? Ich möchte, dass du zwei Fragen für mich löst. Die erste Frage ist, ich möchte, dass Sie zählen, wie viele Elementknoten sie sind. Dann unter dir, Altaic. Das ist die erste Frage. Wie viele Elementknoten ihr Wachstum drehen das? Diese zweite Frage ist, wie viele Knoten sie insgesamt sind, nicht nur 11 Noten, nimmt Notizen, Kommentarknoten, et cetra, et cetra. Sie befinden sich unter dem UL-Tag. Also bekamen sie Deja Zuordnung zwei sehr einfache Fragen. Ich möchte, dass du es ausprobierst. Ich möchte, dass du darüber nachdenkst. Wir haben dadurch viel gelernt. Pausieren Sie einige Abschnitte und der Umgang mit Kindern ist sehr wichtig. Deswegen wollte ich dir eigentlich nur einen schnellen Geschmack geben. Also schnappen Sie sich einen Kaffee, lassen Sie sich aufpumpen, versuchen Sie diese beiden Fragen zu lösen. Es sollte maximal fünf Minuten dauern. Und dann zeige ich Ihnen in der nächsten Vorlesung, wie wir das tun können. 14. Challenge – Lösung: Ja, das haben wir. Ehrfürchtig. Nun, ich musste es mal ausprobieren. Weißt du, ich sage immer, dass das Wichtigste darin ist, Spaß zu haben weil du das Gefühl hast, besser zu lernen, wenn du wirklich genießt, was du tust. Also, ob du es richtig oder falsch hast, Lactone hingerichtet, der Punkt ist, dass du es versucht hast und Walden. Also hier sind wir. Wir haben unsere Artikel auf der linken Seite und wir haben unsere Konsole auf der rechten Seite. Ich möchte, dass wir die Lösung gemeinsam durchlaufen. Aber bevor wir es tun, lassen Sie mich entfernen, nur weil ich der Konsolenpublikum nicht in die Quere kommen will. Ja, wir haben, der erste Schritt ist, unser neues Element zu bekommen, oder? Und es nennt es einfach eine Liste. Wir können es nennen, wie immer wir wollen. Wie machen wir es? Um auf diese URL zuzugreifen, wie wir unser Dokument zugreifen können, das ist unser Ausgangspunkt, getElementsByTagName. Wir wissen, dass wir das UL-Element wollen und wir wissen, dass es nur 1 Elemente geben wird, die wir wollen. Das erste Element in dieser HTMLCollection. Boom, wir haben unsere Liste und ich kann das ausloggen , nur um dir zu beweisen, dass das unsere Liste ist. Lassen Sie uns jetzt mit unserer ersten Frage befassen. Denken Sie daran, was es war. Die erste Frage war, ich möchte, dass Sie zählen, wie viele Elementknoten sie sich in dieser Liste befinden. Wie können wir das tun? Verwenden wir die Eigenschaft children oder verwenden wir die Eigenschaft node list? Das ist richtig, Wir können die kinder-Eigenschaft verwenden, kann nicht warten, weil es eine HTMLCollection von nur einem Typ von Knoten, einem Elementknoten zurückgibt . Und wie viele würden Sie erwarten, zu sehen? Und erwarten, fünf zu sehen, weil ein fünf Elemente. Also, hier geht's. Lasst uns auf unsere Liste zugreifen. Und natürlich können wir auf die Kinder zugreifen, die ich den Jordan nicht zurückgeben will, ich will nur die Länge zurückgeben, oder? Wir mussten zählen, wie viele können wir das tun? Das ist richtig. Wir können auf die Länge Eigenschaft zugreifen und sie gehen wir haben fünf. Gut gemacht, gut gemacht. Ich habe dir gesagt, dass es nicht so schwierig ist. Natürlich gibt es in der Programmierung viele Möglichkeiten, eine Katze zu häuten. Also eine andere Methode, die wir verwenden können, da wir auf unsere Liste zugreifen können. Und wenn Sie mit der Eingabe beginnen, können Sie sogar in unserer Konsole sehen, dies ist direkt aus dem Feld. Sie erhalten eine ganze Menge coole, dass Hilfsmethoden gegeben werden. Es versucht, uns zu helfen. Die allererste auf dieser Liste ist die Anzahl der untergeordneten Elemente. Damit wir darauf zugreifen können. Und wie der Name schon sagt, zählt a, wie viele untergeordnete Elemente sie sind. Und das ist eine andere Möglichkeit, genau das Gleiche zu erreichen. Wie wir sehen können, produzieren die Protokolle dieser beiden Methoden das gleiche Ergebnis, aber jede verwendet eine andere Technik. Die children Eigenschaft ist eine schreibgeschützte Eigenschaft und gibt eine Überzeugung der HTML-Elemente innerhalb des abgefragten Elements. Wir verwenden dann die length Eigenschaft, um die Anzahl der Elemente innerhalb dieser Sammlung zu erhalten. Ok. also das Kindereigentum. Was ist mit der Anzahl der untergeordneten Elemente? Wird der Zugriff auf das untergeordnete Element mich zählen, das direkt intuitiver und direkt auf den Punkt kommt. Meiner Meinung nach ist es viel sauberer. Das ist also die Lösung für die erste Frage. Was ist mit der zweiten Frage? Erinnerst du dich, was das war? Die zweite Frage war, wie viele Knoten gibt es innerhalb des UL-Tags? Nicht nur Elementnotizen, sondern wie viele Knoten im Allgemeinen, wie Sie sicher schon erraten haben, können wir die Children-Eigenschaft nicht verwenden, oder? Da es zwei in einer HTMLCollection gab, müssen wir was verwenden? Untergeordnete Knoten, das ist richtig, weil dies eine Knotenliste zurückgibt. Also lasst uns das mal ausprobieren. Und bevor ich Ihnen die Lösung gebe, lassen Sie mich hier zu Visual Studio Code gehen. Und wie viele Gegenstände sollten sie sein? Intuitiv, wie viele untergeordnete Knoten werden sie wohl sein? Nun, wenn Sie nur den Kommentar und die Elemente nehmen, können Sie die fünf Elemente in einem Kommentar sehen. Also die sechs grundlegenden Knoten, aber die Antwort ist nicht sechs. Denken Sie daran? Wir haben auch Notizen. Wir haben eine neue Zeile und Zeichen vor dem Kommentar. Hier. Wir haben etwas zu dem Kommentar nach jeder Stunde, die ich tagge. Das bedeutet, dass wir die sechs erwarten würden, okay, die Start-Grund-Sechs. Dann erwarten wir 7, 8, 9, 10, 11, 12, 13. Mal sehen, was wir bekommen. Also, wenn wir hier zurück zu unserer Konsole mit Zugriff auf unsere Liste gehen, und jetzt wollen wir auf die untergeordneten Knoten zugreifen, untergeordnete Knoten, und wir wollen die Länge Eigenschaft zugreifen. Sie sind praktisch, wir haben es. Wir haben 13. Ich hoffe, das hat Sinn ergeben. Ich hoffe, Sie haben diesen Auftrag genossen. Ich finde, es macht ziemlich lustig. Und es lehrt Sie auch, wie Sie die Kinder und Kind-Knoten verwenden. Und glaub mir, das wird sehr vorteilhaft für dich als Entwickler sein. Bleiben Sie motiviert, trinken Sie einen Kaffee, und wir sehen uns in der nächsten Vorlesung. 15. Geschwister: Last but not least, auf einem uns schnell über seine Geschwister zu diskutieren. Und wir wissen, dass Geschwister nur Elemente sind, die dasselbe Elternteil teilen. Man kann also sagen, dass Geschwister wie Bruder und Schwester sind. Sie befinden sich alle in der gleichen Baumebene innerhalb des DOM. Lassen Sie mich zuerst etwas klären. Geschwister müssen nicht vom gleichen Typ sein. Genau wie dein Bruder oder deine Schwester ist nicht das gleiche wie du, du bist wahrscheinlich völlig anders als sie. Es ist das gleiche in der DOM-Struktur. Sie müssen nicht zur gleichen Zeit sein. Wir wissen auch, dass Knoten höher als ein Geschwister, unsere Vorfahren, und diejenigen darunter sind Nachkommen. Dies sind Art von gebräuchlichen Terminologien, die in der Programmiergemeinschaft verwendet werden. Und falls Sie sich fragen, wir haben einige davon schon mal gesehen. Sie sind ein paar Methoden, die wir verwenden können, um auf die vorherigen Geschwister und die nächsten Geschwister zuzugreifen. Werfen wir einen Blick auf einige dieser Methoden in Aktion. 16. Geschwister – Beispiel: Also hier sind wir, wir schauen uns Geschwister an. Was ich tun will, ist, dass ich auf unsere zweite zugreifen will, ich nehme die eine in der Mitte und ich will einfach diesen Stil ändern. Und ich weiß, dass es schrecklich ist, Inline-Styling zu verwenden, aber das ist ein so einfaches Beispiel. Ich will es nur so behalten. Und das ändert die Hintergrundfarbe in Grün. Es ist jetzt gehen Sie zu unserem Browser. Lassen Sie uns das vorherige Beispiel löschen. Er hat den Auftrag, wir haben es gerade getan. Jetzt können wir, und der mittlere Punkt sollte grün sein. Das ist die, die wir gerade gestylt haben. Das ist Zugriff auf die Konsole und lassen Sie uns die Konsole löschen, bevor wir mit dem Programmieren beginnen Ich möchte hier nur betonen, dass Geschwistereigenschaften und -methoden sehr ähnlich funktionieren wie die Kindermethoden, die wir gerade gesehen haben. Da einige Methoden nur Elementknoten durchlaufen, während andere Methoden tatsächlich jeden einzelnen Knotentyp durchlaufen. Wieder. Also haben wir das schon mal durchgemacht, sollten nicht überraschend sein. Aber das coole Ding mit Geschwistern ist, dass es viel intuitiver ist, nur das Wort der Methode selbst. Also frühere Geschwister und Nick Geschwister oder geben jede Art von Knoten, jede Art von Geschwister. Während frühere Elemente Geschwister oder nächste Elemente Geschwister, auf der anderen Seite, natürlich, werden nur diese Elemente Geschwister zurückgeben. In diesem Sinne geht es darum, intuitiver zu sein. Zunächst möchte ich Sie fragen, wie sind wir zu diesem mittleren Punkt 2 gekommen? Wie würden wir das tun? Denn was ich tun möchte, ist, dass ich nur die Farbe von Punkt 1 und Punkt 3 ändern möchte . Romanist, wie würden wir das machen? Nun, der einfachste Ausgangspunkt in meinem Kopf wäre, auf den Gegenstand zu einem in der Mitte zuzugreifen. Und dann müssen wir nur eine Hintergrundfarbe der vorherigen Elemente, Sibley, und die nächsten Elemente von Lead ändern . Das ist irgendwie, wie ich denke, würde das tun. Der Ausgangspunkt ist also, dieses mittlere Element zu Verbündeten zu existieren, wie würden wir es tun? Der Ausgangspunkt sollte sein, tatsächlich auf den ungeordneten Listenpreis zuzugreifen , denn dann können wir mit dem Zugriff auf den Speicher beginnen. Lassen Sie uns zunächst eine Variable namens URL definieren. Was wir tun wollen, ist, dass wir auf die getElementsByTagName zugreifen wollen. Wir haben das durchgemacht, Sie bemerken, dass wir wissen, dass dies eine HTMLCollection zurückgeben wird, nicht wahr? Und wir wissen, dass ich die ganze Seite ein ganzes Dokument nur aus einem besteht, du Altaic. Wir möchten also auf das erste Element in dieser Liste zugreifen. Also, hier geht's, Hier ist unser U L, und wenn wir das ausloggen, kann ich es dir beweisen. Da ist es. Machen Sie Sinn ist intuitiv bisher. Aber wie greifen wir jetzt auf das mittlere Element zu? Nun, wenn Sie gedacht hätten, dass wir Kinder verwenden könnten, sind Sie 100 Prozent korrekt, weil die Kinder nur Elementelemente enthalten und wir das Drei-Element-Element sehen können. Wir wollen auf die zweite zugreifen, oder? Der in der Mitte. Alles, was wir tun müssen, ist eine Variable namens Mittelachsenwert L zu definieren , verlässt die Kinder innerhalb dieses UL-Tags. Und wir wollen das sehr mittlere Element, auch bekannt als das zweite Element innerhalb dieser Sammlung. Also gehen wir hin. Wir trösten Log Mitte. Wir haben buchstäblich Zugriff darauf in einer Variablen. Auch. Nun, wenn wir dieses Element ändern wollen, eins, diese Hintergrundfarbe, um rosa zu sagen, wie machen wir es? Denken Sie daran, dass wir verschiedene Methoden haben und es geht um Geschwister. Wir haben frühere Geschwister, und wir haben vorherige Elemente. Geschwister. Wenn wir nur frühere Geschwister benutzen, lass mich dir zeigen, was wir bekommen. Vorherige Geschwister. Das Problem dabei ist, dass es alle Knoten zurückgibt und es bedeutet, dass wir tatsächlich diesen Text zu uns zurückkehren. Und in diesem Fall ist der Geschmack nur, um den Charakter mit den ganzen Räumen zurückzugeben. Das ist nicht das, was wir wollen, ist, dass wir tatsächlich das Element selbst wollen. Also hier ist eine Möglichkeit, es zu tun, ist, vorherige Geschwister und Nachahmung wieder existieren, das vorherige Geschwister. Und dann wird uns den Artikel, den wir brauchen, wieder zu bekommen. Aber es ist umständlich. Deshalb gibt uns die DOM-API eine intuitivere Herangehensweise. Und dieser intuitive Ansatz ist der Zugriff auf die mittlere Variable. Und es wird nur die vorherigen Elemente Geschwister genannt. Das ist alles, was es dazu gibt. Und natürlich können wir es Stil-Eigenschaft zugreifen. Und wir können die Hintergrundfarbe ändern, um Pink zu sagen. Da gehen wir. Wir haben gerade die Hintergrundfarbe von Element 1 in Pink geändert. Was ist jetzt mit Atom drei? Nun, ja. Auch hier können wir auf nächste Geschwister zugreifen können Geschwister vorhersagen, wie Sie in der Konsole sehen können, wird es den Textknoten zurückgeben. Also ja, wir können es wieder verketten, aber es ist umständlicher. Der einfachere Weg ist, auf unsere Variable zuzugreifen und direkt auf das nächste Element in der Geschwistermethode zuzugreifen. Wir können dann auf diese Stil-Eigenschaft zugreifen, ändern Sie die Hintergrundfarbe zu sagen. Also haben wir es heute. Wir haben gerade Nick Geschwister, nächstes Element, Geschwister, vorherige Geschwister und vorherige Elemente Geschwister verwendet nächstes Element, Geschwister, vorherige Geschwister . Ich hoffe, es wird Szenen machen, die Sie sehen können, es ist ziemlich intuitiv. Es ist nicht so schwierig. Also haben wir Eltern gesehen, wir haben Kinder gesehen, Geschwister gesehen. Ich glaube nicht, dass Sie das erkennen, aber im Moment werden Sie tatsächlich ziemlich fortgeschritten, im DOM zu arbeiten. Und viele Leute verstehen nicht, was diese Methoden. Also, während ich dann super, super beeindruckt bin, haben wir viel besser gemacht. Wir sind noch nicht fertig. Ist viel mehr Aufzug in diesem Kurs. 17. Zusammenfassung: Ernsthaft, ernsthaft, Sie haben eine unglaubliche Menge getan. Ich bin super aufgeregt. Wir haben gerade den Abschnitt abgeschlossen, wie Sie das DOM durchqueren können. Und manchmal denke ich, du weißt nicht, wie weit du gekommen bist. Ich meine, jetzt und Sie wissen, wenn die Kuppel ist, wissen Sie, wie unterscheidet sich von Ihrem HTML-Code. Wir haben Zugriffsmethoden durchlaufen. Wenn Sie also die ID oder den Kostennamen des Tag-Namens kennen, können Sie literarisch auf dieses bestimmte Element direkt aus dem DOM zugreifen. Aber noch mehr als wir mit nur dem gesamten durchqueren das DOM. Das bedeutet, selbst wenn Sie nicht wissen, was der Klassenname oder die ID ist, können wir das DOM nach oben und unten bewegen und Dinge in unserer Freizeit ändern. Walden und ich denken, wir nehmen es auf und Sie haben schon eine unglaubliche Menge gelernt. Wir haben praktische Beispiele durchgemacht, wir haben in der Theorie durchgemacht, wir haben sogar Geschmäcker getan, um zu kommen. Also wie Silverstein, Walden, wie weitermachen, motiviert bleiben. Und im Moment möchte ich nur eine kurze Zusammenfassung dessen geben, was wir gelernt haben. Und im nächsten Abschnitt, alles, wird es dir den Kopf blasen, denn jetzt werden wir anfangen, nicht nur den Hund einzuziehen , und ich werde aufhören, ihn zu manipulieren. Also, du gehst nach Amerika wird es sein. Also wirklich, vielen Dank, Walden. Vielen Dank. Atmen, entspannen und genießen Sie den Rest dieser sehr kurzen Vorlesung. Und wir sehen uns im nächsten Abschnitt. Audios. Wir sind fast, fast fertig. Dies ist nur eine kurze Schlussfolgerung darüber, was wir tatsächlich in diesem Abschnitt über das Durchlaufen des DOM gelernt haben. Wir haben gelernt, wie man auf Knoten zugreift. Und dabei wissen wir jetzt, wie man den DOM-Baum läuft, wie sie in der Entwicklungsgemeinschaft sagen. Und dies beinhaltete das Lernen über die Eltern, Lernen über die Kinder. Und natürlich, zwischen den Kindern, wenn Sie lernen, wie Geschwister funktionieren, sollten Sie jetzt in der Lage sein, getrost auf jeden Knoten im DOM zuzugreifen und diese Fähigkeit nicht als selbstverständlich zu betrachten ist wirklich wichtig. Wie ich gerade sagte, wir haben immer noch eine Menge Informationen zu lernen und noch einen langen Weg vor uns. Lehnen Sie sich zurück, nehmen Sie einen Züchter, genießen Sie, und wir sehen uns im nächsten Abschnitt. 18. Jetzt ist die Zeit mit der Zeit, dynamische Elemente zu erstellen: Willkommen in diesem neuen Abschnitt zum Erstellen von Elementen im DOM. Es ist also sehr cool, dass jetzt und Sie tatsächlich auf Elemente im DOM zugreifen können. Sie können den Hund nach oben und unten durchqueren. Aber wissen Sie, was noch mehr Columbus ist? Es erstellt neue Elemente im DOM, weil meine Freunde, dies ist, was Wochen-Sites und Anwendungen Ticken macht. Wir müssen dynamische Websites erstellen. Und um Sie daran zu erinnern, ästhetische Website ist irgendwie von uns nur verrotten unsere HTML und dann nichts anderes passiert. Langweilig, nicht wahr? Viel spannender für uns, ist die Schaffung dynamischer Breite Dimensionierung. Und das bedeutet, dass wir Sprachen verwenden, meist JavaScript, das wir andere verwenden können, um auf das DOM zuzugreifen und zu manipulieren, die neue Elemente im laufenden Betrieb erstellen. Das wird also ein super spannender Abschnitt sein. Vertrau mir, wir werden in einer lesbaren Mutter von Informationen lernen. Also digitale Ninja-Songs, bereit, Machen Sie sich bereit. Lassen Sie uns darüber lernen, wie Elemente im DOM zu erstellen. Ich bin super, super aufgeregt. Das ist ein Führer. 19. Static vs. dynamische Seiten: Okay, also was kommt als Nächstes? Wir haben gelernt, Glossen zu benutzen. Sind diese Tags exzentrisch, cetera, um einen beliebigen Knoten im DOM zu finden. Und nochmal, halten Sie das nicht für selbstverständlich. Es ist eine fantastische Fähigkeit. Fäulnis Jetzt können wir auch Eltern-Kind-und Geschwistereigenschaften verwenden, um die Morgendämmerung nach oben und unten zu durchlaufen. Und ich werde das noch einmal betonen. Das ist cool. Aber weißt du, was noch cooler ist? Mit der Fähigkeit, Elemente im DOM zu erstellen und zu ändern. also einen Schritt zurück machen, können wir sagen, wir haben zwei Arten von Websites, statisch und dynamisch. Mit statisch meine ich nur Elemente, die der Seite hinzugefügt werden, indem direkt Code in Ihre Datei index.html geschrieben wird. Wenn EINE langweilig, lahm, schlicht Jane Säcke, bekommt man die Punkte. Statische Websites, nur irgendwie mehr. Vor allem in der Welt, in der wir jetzt leben. Was mich zu dynamischen Websites bringt. Hier werden Elemente mit JavaScript hinzugefügt. Oh süßer NAS, die SEC mal. Du kriegst die Punkte. Das ist cool. Das ist es, was wir auf unseren Websites wollen. Das ist, was wir eigentlich, weißt du was, das ist nicht mal eine 12. Das ist ein Bedürfnis. Wenn Sie jetzt keine dynamischen Websites haben, werden Sie einfach hinter der Kurve gelassen werden, die y ist. Der erste Teil dieser Abschnitte in diesem Kurs werden wir alle über ihren Zugriff auf das DOM. Aber es ist nicht genug, weil der Zugriff auf das DOM uns nur auf halbem Weg bringt. Wir müssen auch lernen, wie man Elemente im DOM dynamisch erstellt. Also bin ich super, super aufgeregt in Abschnitt sind wirklich m Ich möchte nur ein paar Fragen beantworten, bevor wir auf tatsächlich Codierung gehen. Insbesondere möchte ich sehen, wie wir Elemente und auch Weizen erstellen können , wie die Methode kommt, die uns erlaubt, dies zu tun. Schauen wir uns das schnell an. 20. Wo kommt es uns?: Die gebräuchlichste Möglichkeit, ein Element zu erstellen, ist Drumroll-Elementmethode, die uns von der DOM-API gegeben wird. Die Frage, die Sie wahrscheinlich haben, ist, wo finden wir diese Methode wird einfach auf die Konsole springen und einen Blick werfen. Also hier sind wir. Ich habe gerade eine Google Chrome-Seite dort oben geöffnet. Nichts dazu. Ich möchte mit uns erstellen Element Methode kommt aus. Also lassen Sie uns unser Dokument überprüfen, wie wir es normalerweise tun. Sie sollten mit diesem banalen sehr vertraut sein. Und lasst uns zur Konsole gehen. Lassen Sie uns die Konsole löschen und starten Sie mit dieser Methode suchen, Sie könnten denken, Okay, cool. Lassen Sie uns beginnen, indem Sie innerhalb des Dokuments suchen. Das Problem, indem Sie ein Dokument wie dieses eingeben, wie wir zuvor gesehen haben, ist es uns tatsächlich die HTML-Darstellung unseres Dokuments gibt. Das wollen wir nicht. Wir möchten, dass die JavaScript-Notation oder die JSON-ähnlichen Darstellungen dies tun, wie Sie sich sicher erinnern würden. Wir trösten das Dokument auf den Bildschirm. Dies gibt uns jetzt ein Dokument im JSON-ähnlichen Format. Und weißt du was? Lassen Sie mich mich loswerden, weil ich hier nicht im Weg stehen will. Was wir jetzt tun können, ist, dass wir uns dieses Dokument ansehen können. Wenn wir dieses Dokument öffnen und wir betrachten Elemente erstellen und die Meere betrachten. Und Sie können sehen, dass es nirgends zu finden ist. Sobald Ihnen das passiert ist, ist der nächste Punkt der Kohle, den Prototyp zu betrachten. Wenn wir also unten scrollen, sehen Sie dieses proto, sein Prototyp ist das HTML-Dokument. Keine Sorge, wir werden uns später im Kurs mit all dem beschäftigen. Moment versuchen wir nur, es zu finden. Also lasst uns dieses Proton öffnen. Ist es ja. Erstellen Sie Elemente. Nein, nein, ist es nicht. Also wieder, dasselbe, was nach unten zu seinem Prototyp scrollen, der Dokument ist. Aber ja, es ist eine Hauptstadt D. Lasst uns das aufmachen. Und hat das schafft Element? Hat dies die Create-Element-Methode. Cooh, das ist, was all diese Protonen und was ist das große D für Dokumente? Springen wir einfach schnell zu den Folien zurück. Ich möchte das etwas ausführlicher besprechen. 21. Der Unterschied zwischen Dokument und Dokument: Wir haben gerade gesehen, wo diese Methode zum Erstellen von Elementen zu finden ist. Das ist ein wirklich interessanter Vortrag , den wir durchmachen werden und es ist sehr fortgeschritten. Nicht viele Menschen wissen, wie das alles zusammenpasst. Betrachten Sie sich also als einer der wenigen Glücklichen. Ich hoffe, Sie genießen es und ich hoffe, Sie schätzen es zu schätzen. Aber es ist ununterbrochen. So haben wir gerade gesehen, dass wir diese erstellt Element auf dem Dokumentobjekt finden können. Und das Wichtigste, was ich darauf hinweisen möchte, ist, dass es nicht das gleiche wie das kleine d ist. Dies ist ein großes D, das Dokumentobjekt. Also, was ich jetzt tun möchte, ist, dass ich das Dokument mit dem Dokument vergleichen möchte, das wir alle mit dem kleinen d tun. Was ist der Unterschied und warum ist das dieses Dokument, was sich das ansieht? Wir wissen, dass wir damit beginnen mussten, das Dokument auf den Bildschirm zu trösten. Wir konnten es nicht einfach direkt trösten, weil das uns die HTML-Darstellung gibt. Und wir haben gesehen, dass das Proto dieses Dokuments das HTML-Dokument ist. Alle Menschen, was bedeutet das, dieses HTML-Dokument und warum hat es auf den Tag und wie bezieht es sich auf das Dokument? Wir werden die Konstruktorfunktion dieses Dokuments protokollieren. Schauen wir uns jetzt mal an. Wir wollen jetzt tun, ist ich will sehen, was diese konstruiert, dass wir auf unser Fenster zugreifen, unser Dokument mit auf dem Fenster. Und lassen Sie uns auf diese Konstruktorfunktion zugreifen, Konstruktor. Wenn wir dies zurückgeben, können wir sehen, dass das, was uns zurückgegeben wird, ist dieses HTML-Dokument eine Funktion konstruieren. Das ist sehr, sehr wichtig. Wie wir gesehen haben, können wir schließen, dass das Dokumentobjekt aus dem HTML-Dokumentkonstruktor konstruiert wird . So können wir sagen, ein Teil des Zwecks dieses HTML-Dokumentobjekts ist es, dieses Dokument für uns zu erstellen. Maxine ist vorne. Es wird von irgendeiner Richtung kommen, und da kommt es her. Ok, großartig. Jetzt haben wir unser Dokument, das wir alle verwendet haben. Aber was ist das Dokument tun wird? Finden Sie heraus, wir können nur Konsolenprotokoll bekommt Knoten-Typ. So verlassen wir das Fensterdokument keine Zeit. Und wie Sie herausfinden werden, ist Konsolenprotokolle 99 der Code für den Dokumentknoten. Wir wissen, dass das HTML-Dokument konstruieren eine Funktion erstellt das Dokument. Und wir wissen auch, dass es vom Typ Dokumentknoten ist. Warum ist das für uns relevant? Da es sich bei dem Dokument um ein Dokumentknotenobjekt handelt. Wir wissen, dass es vom Dokumentknoten erbt. Und ja, es ist ein Großbuchstabe D ist nicht das gleiche wie r kleine d. Dies ist das große D. Und weil es vom Dokument erbt und man könnte fast sagen, dass der Dokumentknoten theoretisch die Wurzel des Dokuments ist. Aber es ist nicht wirklich die Wurzel des Dokuments in allen praktischen Zwecken. Weil der Stamm unserer Webseite der erste Elementknoten im Dokument ist, der das HTML-Element ist. Lassen Sie mich Ihnen das jetzt zeigen. Lassen Sie uns einfach auf die Konsole cutie oder Ion wechseln. So können wir die Art von in der Wurzel unseres gesamten Systems sehen ist dieser Dokumentknoten. Aber in aller Zweckmäßigkeit ist nicht wirklich die Wurzel unseres Dokuments. Es sollte das HTML-Dokument sein und ich werde Ihnen zeigen, warum, Weil wir das erste Element innerhalb dieses Dokumentknotens zugreifen möchten. Also, um das zu tun, lassen Sie uns trösten. Ich werde Archea dokumentieren. Und natürlich können wir dieses Dokument öffnen. Wir können dann nach unten zu seinem Proton scrollen, das ist das HTML-Dokument. Wir können dann nach unten zum Dokument scrollen. Und ich will dir nur hier zeigen, wenn wir uns das erste Element Kind ansehen, was ist da drin? Da gehen wir. Das ist unser HTML. Dies ist ein praktischer Zweck, die Wurzel unseres HTML-Dokuments. Also, Rebecca, hier haben wir aufgehört. Wir wissen, dass die Wurzel unserer Seite in allen praktischen Zwecken ist, das HTML-Element. So können wir sagen, dass das HTML-Element die Wurzel oder das oberste Element unseres HTML-Dokuments ist . Und wenn diese HTML-Datei in unserem Browser geladen wird, wissen wir, dass diese Konstruktorfunktion eintritt und sie zum Dokumentobjekt wird. Und Dokumentenkapital D ist der ultimative Knoten, von dem ich dokumentieren werde, erben von PS, sowohl Dokument- als auch HTML-Dokumentkonstruktoren , die alle vom Browser automatisch instanziiert werden. Wenn Sie ein HTML-Dokument laden. Das ist, wo sie herkommen, falls Sie sich fragen. Und in der Regel ist die Verwendung dieser Methoden mit der Bereitstellung eines HTML-Dokuments zu einem iframe verbunden. Aber wie auch immer, das ist ein bisschen fortgeschritten. Aber was wir in diesem Vortrag gelernt haben, ist unglaublich fortgeschritten. Sie kennen jetzt den Unterschied zwischen dem kleinen d-Dokumentobjekt. Dann erbt es letztendlich von diesem großen D-Dokumentknoten. Und dann dazwischen haben Sie irgendwie diesen HTML-Elementknoten und Hals Kicks mit einem konstruierten, um fett zu sein, das Dokument ist 100, kann ein bisschen verwirrend erscheinen, aber vertrauen Sie mir, es ist sehr fortgeschritten und gut gemacht, um so weit zu kommen. Ich hoffe, Sie lernen eine Tonne, aber hören Sie nicht auf. Wir sehen uns in der nächsten Vorlesung. 22. Mehr auf createElement(): Lassen Sie uns in das Fleisch kommen, um ein Element auf unserer Seite zu erstellen. Und das heißt, ich möchte, dass wir über die Create-Element-Methode sprechen. Alles, was wir tun müssen, ist, dass wir das Create-Element auf unserem Dokumentobjekt aufrufen. So greifen wir über die Punktnotation auf unser Dokument zu. Wir greifen auf die Elementmethode zu. Das ist einfach. Und als Argument, alles, was wir als HTML-Tag-Namen übergeben müssen, auch bekannt, dass wir es sagen müssen, welches Element wir erstellen wollten. Machen Sie Sinn. Lassen Sie mich schnell zur Konsole springen und Ihnen zeigen, wie das funktioniert. Am Ende dieses Abschnitts werden Sie ein Großmeister sein, der Elemente erstellt. Ich möchte, dass wir schnell aus den Linien heraustreten, die wir uns angesehen haben. Und ich möchte, dass wir uns schnell nur das Element erstellen betrachten. Ich möchte, dass Sie sehen, wie einfach und intuitiv es ist. Also, hier geht's. Ich habe einen normalen Google Chrome. Offen. Greifen Sie auf die Konsole zu. C. Hier geht's. Wir haben Google Chrome mit der Konsole geöffnet. Sehr einfacher Limiter zoomen, so dass Sie die Konsole besser sehen können. Und sagen wir, wir möchten einen Absatz auf DOM hinzufügen. Wie wir das machen. Nun, lassen Sie uns eine neue Variable namens new para definieren. Um ein Element zu erstellen, müssen wir auf unser Dokumentobjekt zugreifen. Wir wissen das. Wir verwenden die Punktnotation, um auf all diese Eigenschaften und Methoden zuzugreifen. Und das, was wir wollen, ist Element erstellen. Es ist sehr intuitiv. Wir wollen erstellen, natürlich ist ein Absatz-Tag. Und dann gehen wir, wir haben tatsächlich ein Absatzelement erstellt. Wie einfach und Spaß war bei. Ich kann Ihnen zeigen, dass wir es erstellt haben, indem Sie einfach die Variable abmelden, und hier ist unser Absatz-Tag. Aber was ist vielleicht nicht so intuitiv, denken Sie, dass dies dem DOM hinzugefügt wurde? Oder wie haben wir es herausgefunden? Lassen Sie uns eine neue Variable namens HTML Ramada definieren. Definieren Sie das. Wir haben uns die drei wichtigsten Objekte in unserem DOM angesehen, von denen eines der HTML ist. Um das zu erhalten, greifen wir nur auf die Dokumentelementeigenschaft in einem Dokument zu. So einfach. Und wenn wir unsere HTML-Daten trösten, und wenn wir unseren Körper öffnen, haben wir nicht das Paar Billy. Nirgendwo in Fleisch zu finden. Machen Sie dies sogar ein bisschen breiter, damit Sie es sehen können. Es gibt keinen Absatz, und das ist der Sinn, zu versuchen, und wir haben es erstellt. Das ist irgendwie nur im Niemandsland. Lassen Sie uns schnell zurück zu den Folien springen, weil ich darüber etwas detaillierter sprechen möchte. Ehrfürchtig. Wir haben gerade gesehen, wie einfach es ist, ein neues Element zu erstellen. Insbesondere ein Absatzelement. Um zusammenzufassen, haben wir eine neue Variable namens new para und net new pair of variable einen Referenzton halten erstellt , neu erstellte Element. Wir haben buchstäblich ein neues Absatzelement erstellt. - Ja. Nun, nicht so schnell auf Ihre Pferde. Das Erstellen dieses Absatzelements ist sehr schnell und einfach, aber es schwebt einfach nahtlos im Raum ganz von selbst. Der Grund dafür, dass das Absatzelement verloren geht, weil das DOM keine Ahnung hat, dass es existiert. Alles geneigt, was tun wir? Wie sagen wir dem Dominanten, dass es existiert? Damit dieses Element, dieser Absatz Teil des DOM ist, brauchen wir eine Möglichkeit, es auszudrücken. Keine Sorge. Lassen Sie mich zum Schach schneiden, damit ein Element Teil des DOM ist. Die anderen beiden Dinge, die wir tun müssen. Also machen wir einen Schritt zurück. Wir haben unser Absatz-Tag erstellt, das ziellos herumschwebt, und wir haben dazu Elementmethode erstellt. Die beiden Dinge, die wir tun müssen, um es an das DOM anzuhängen. Erstens müssen wir ein Element finden, das als übergeordneter Ordner Absatz fungiert. Das ist das erste, was wir tun müssen. Das zweite, was wir tun müssen, ist, dass wir das Element haben, das wir wollen, in diesem Fall den Absatz zu einem übergeordneten Element. Und wir tun es in der Regel, indem wir eine Farbe Kind, die Farbe Kind Methode. Macht das Sinn? Also machen Sie einen Schritt zurück. Die erste Anweisung beim Erstellen eines Elements besteht darin, es tatsächlich zu erstellen. Aber das reicht nicht. Wir müssen dann definieren, wo wir es im DOM platzieren wollen. Um das zu tun, müssen wir irgendwie denken, okay, cool, was wollen wir, dass es Eltern sein soll? Und dann müssen wir es an den Elternteil anhängen. Ich hoffe, es ergibt Sinn, aber mach dir keine Sorgen, wenn es nicht der Fall ist. Denn wie immer müssen wir das in der Action-Szene sehen. 23. Wir fügen ein Element in der DOM: Okay, also haben wir gesehen, dass, wenn wir erstellen Element verwenden, dass es irgendwie im Raum schwebt. Und der Grund dafür ist, dass das DOM kein wirkliches Wissen hat, dass dieses Element existiert. Und wir sahen auch, dass, damit ein Element Teil des DOM ist, die beiden Dinge, die wir tun müssen, um sich daran zu erinnern, was sie waren. Das ist richtig. Das erste ist, dass wir herausfinden mussten, welches Element wir als Elternteil fungieren wollten. Und zweitens, sobald wir das getan haben, verwenden wir eine Methode namens Schmerzkind um dieses Element dem Elternteil hinzuzufügen. Lassen Sie mich Ihnen zeigen, was ich meine. Also hier sind wir. Ich habe Visual Studio Code geöffnet und ich habe das Durchsuchen auf der rechten Seite. Ich ermutige Sie wirklich sehr, mit mir zu codieren, weil ich mehr Spaß hatte. Du erfährst mehr. Also lasst uns knacken. Ich möchte hier nur eine sehr einfache HTML-Vorlage erstellen. Und ja, wir werden einen Kopfteil innerhalb des Kopfes haben. Wir werden einen Titel haben. Wir können unseren Titel erstellen Elemente nennen. Und natürlich können wir ein Style-Tag haben, was wir jetzt nicht ganz gemacht haben, aber wir werden es in Kürze tun. Das ist also unser Kopf. In unserem Körper möchte ich eine sehr vernünftige Seite und sie will nur ein H1-Tag. Und das kann MI real genannt werden. Wir speichern dies und aktualisieren den Browser. Wir können sehen, das sind H1. So weit so gut. Fügen wir nun einen Absatz hinzu. Nun, wissen Sie, was eigentlich, zuerst, lasst uns diesen Quickie stylen. Cool. Welche Art von Styling können wir tun? Lassen Sie uns einfach eine einfache Hintergrundfarbe machen, weil Weiß nur abscheulich ist. So können wir die Hintergrundfarbe in eine andere ändern. Sagen wir eine schöne coole, funky verschwommen, purply Farbe. Da gehen wir. Und lassen Sie uns etwas Polsterung hinzufügen. Das sind also Körper. Ich möchte, dass wir jetzt auch unser h1-Tag stylen, weil ich das nicht wirklich sehr, sehr klar lesen kann. Also lasst uns die Farbe unseres H1-Tags ändern, um eins für wenn, wenn, wenn, wenn sieben einzugeben. Nur damit es besser lesbar ist, können wir es jetzt tatsächlich sehen, lassen Sie uns die Schriftgröße davon erhöhen. Wir können die Schriftfamilie ändern. Lassen Sie uns diesen Geschmack einfach unterstreichen. Also, wie geht es dem MRL? Und jetzt möchte ich, dass wir dieser Seite einen Absatz hinzufügen. Was machen wir? Nun, lassen Sie uns JavaScript verwenden, um dies zu tun. Also werde ich ein Skript am Ende dieser Seite einfügen und benötigt Punktcodierungen und JavaScript. Lassen Sie uns unser Absatz-Tag hinzufügen, um sich daran zu erinnern, wie das zu tun ist. Nun, zuerst, lassen Sie uns ein neues Element definieren. Und dieses neue Element wird ein Absatz sein. Nun, unser Ausgangspunkt auf eine ganze Seite ist dieses Dokumentobjekt. Wir verlassen eine seiner Eigenschaften und Methoden und die, die wir wollen, ist Element erstellen. Wir wissen das, wir haben das schon mal getan. Und das Element, das wir erstellen möchten, ist dieser Absatz. Und das ist Schritt eins. Denken Sie daran, dass wir das letzte Mal gemacht haben, dass wir ein Element Burnouts im Raum schweben. Es ist alles von alleine. Wie fügen wir das dann jetzt an das DOM an? Einfach, wir müssen zuerst seine Eltern finden und dann müssen wir ein schmerzhaftes Kind benutzen. Mal sehen, wie das aussieht. Nennen Sie es also Schritt 1. Lasst uns die Eltern schnappen. Und sagen wir einfach, wir wollen diesen Absatz für unseren Körper erhalten. Also natürlich, lassen Sie uns einfach eine Variable definieren, die Körperelement genannt wird. Natürlich dokumentieren und wie wir eine Vielzahl von Methoden verwenden können. Wir haben das schon früher getan, aber ich möchte den Abfrage-Selektor verwenden. Und wir wollen die Leiche holen. Lassen Sie mich das ein bisschen größer machen. Wie geht's? Sitzt auf einer Linie. Da gehen wir. Also, das ist Schritt eins. Schritt zwei ist, lassen Sie uns nun unser Absatz-Tag an diesen Körper anhängen. Und das ist super einfach. Alles, was wir tun müssen, ist auf unsere Eltern zuzugreifen, die wir eine Variable namens body element definieren. Und wir müssen auf eine Methode für dieses Element zugreifen , das ein schmerzhaftes Kind genannt wird. Das ist es, was ich gesagt habe. Dies ist der zweite Teil des Anfügens eines Elements an das DOM. Weil er jetzt sagt: Okay, cool, wir wollen dieses Paar tatsächlich an der Leiche befestigen. Und wir haben unsere Paarung in eine Variable namens new element definiert. Wenn wir das retten, haben wir es buchstäblich getan. Wenn wir unser Dokument überprüfen, wenn wir dieses Dokument inspizieren und wir hier zu unseren Elementen gehen, schauen wir innerhalb des Körpers. Sie sind unser Absatz. Wie genial ist das? Also haben wir buchstäblich jetzt unsere Absatz-Tag zu dem DOM bearbeiten, dass die, ein paar Dinge, die ich über diesen Zeitraum von Band sagen möchte weil wir es nicht auf dem Bildschirm Kerzen sehen können, wir haben keinen Geschmack hinzugefügt. Also, wie machen wir das? Nun, springen wir zum nächsten Vortrag. Ich möchte nur zusammenfassen, was wir getan haben. Und dann möchte ich Ihnen zeigen, wie wir Text hinzufügen. 24. Mit TextContent() ein Element: Lassen Sie uns im ersten Schritt unseren Code in einen DOM-Baum darstellen. Wie sieht es aus? Nun, los geht's. Wir haben wie zuvor gesehen, Sie sollten sehr vertraut sein mit ihm. Wir begannen unser Fenster, wir gelangen schließlich zu unserem HTML. Es teilt sich in zwei Zweige, den Kopf und den Körper. Dies sind Kinder des HTML-Elements, der Kopf, wie wir gesehen haben, und er hat einen Titel und Stil, und unser Körper hat ein H1-Tag. Und wir haben das Skript-Tag eingeschlossen. Ich habe mich nicht wirklich innerhalb dieses Skript-Tags daran erinnert, dass, wenn wir unser JavaScript geschrieben haben, um diesen Absatz zum DOM hinzuzufügen. Also, da gehst du, der Prüfungs-DOM-Baum. Aber was war das nächste, was wir in unserem Skript-Tag getan haben? Erinnerst du dich, was das war? Tetrad, wir bearbeiten dieses Absatz-Tag. Lassen Sie mich Ihnen zeigen, wie das aussieht. Das Ego. Wir bearbeiten das Absatz-Tag buchstäblich. - Ja. Es sind gute Nachrichtenrechte. Wir haben buchstäblich zum ersten Mal etwas zum DOM hinzugefügt, so gut gemacht. Und ich hoffe, Sie können sehen, dass es ziemlich intuitiv ist und es nicht so schwierig ist. Aber ich möchte, dass wir über dieses Absatz-Tag und ein wenig mehr Detail sprechen. Wie Sie wissen, ist diese neu erstellten Absatzelemente ohne Geschmack nicht sehr nützlich. In der Tat konnten wir nichts sehen, das auf dem Bildschirm angezeigt wird. Wir mussten nur den Elementinspektor inspizieren, um herauszufinden, dass ein Paar tatsächlich zum DOM hinzugefügt wurde. dritte gute Nachricht ist jedoch, dass wir Text mit der Text-Content-Eigenschaft hinzufügen können. Aber wie braucht dies Inhalte richtig funktionieren Gefahrenhinderaussehen und wie sehen wir es in Aktion? Lassen Sie mich einfach schnell zum Texteditor springen und ich werde es Ihnen jetzt zeigen. Sie kennen mich mittlerweile, Ich liebe praktische Beispiele und wir haben gerade gesagt, dass, um hinzuzufügen braucht Zeit Element der Haare von Elementen. Insbesondere, dass wir diese Eigenschaft namens Textinhalt verwenden können. Also mal sehen, wie es funktioniert. Wir sind in dem Code, den wir buchstäblich zusammenstellen. Und ich möchte dies verwenden, nimmt Content-Eigenschaft. Wie machen wir es? Nun, die erste Codezeile noch in unserem JavaScript können wir sehen, dass wir eine neue Variable namens neue Elemente erstellt haben. Deck ist unser Absatz. Also, wenn wir auf diese Variable zugreifen, können wir auf eine Eigenschaft namens Textinhalt zugreifen. Und das ist es, was ich Ihnen zeigen möchte. Es ist buchstäblich so einfach und wir weisen den Wert dieses Inhalts zu, den wir einer Seite hinzufügen möchten. Was wollen wir in diesem Fall tun? Nun, ich möchte ein paar hinzufügen und sagen wir einfach, oder eine Ausgeburt Ihrer Phantasie. Und wenn wir das speichern und boom, haben wir buchstäblich diesen Absatz in unserem Browser. Aber dieser Absatz sieht abscheulich aus, hat ihn nicht gerade gelesen. Also lasst uns einfach in unser Style-Tag gehen hier, und lasst uns anfangen, diesen Absatz zu stylen. Das Spiel, können wir tatsächlich die gleichen Kalorien auf Schriftgröße verloren verwenden. Wir können sagen, aus 36 Pixeln. Wir können auch die Schriftfamilie ändern, nur um konsistent zu sein, ist eigentlich ein bisschen weg, um all dies getan zu haben und legte es auf den oberen Körper, was geholfen hätte. Aber wie auch immer, das ist nur eine von vielen Möglichkeiten, wie wir es tun können. Und lassen Sie uns einfach diesen Bolzen Schriftgewicht fett machen. Fertig. Wie sieht das aus? Also gehen wir hin. Wir haben einen Absatz mit Editor zum DOM und jetzt mit Text bearbeiten war in einem Absatzelement. Hoffnungslos. Wissenschaftliche scheint hier größer zu sein, Konsole, um CS zu versüßen. Und sie, wir gehen mit einem G erstellt unseren neuen Absatz, dass wir dann auf diese Eigenschaft aufgerufen nimmt Inhalt, um Inhalte auf der Seite hinzuzufügen und wissen, Sie wissen, dies bereits. Springen wir zurück in die Vorlesung. Cool, da gehen wir. Sie können sehen, dass es nicht so schwierig war, während Dan, und wie ich bin schreien, ist, dass die Kombination von Create-Element und dies nimmt Content-Eigenschaft unseren kompletten Elementknoten erstellt hat. Super, super aufregend. Aber diese eine Frage, die ich viel von Studenten gestellt bekommen, und es ist, könnten wir nicht im HTML anstelle dieses Textinhalts verwendet haben? Und die Antwort ist ja, Sie hätten im HTML verwenden können. Denken Sie daran, was ich in diesem Kurs immer wieder sage, dass es viele Möglichkeiten gibt, eine Katze zu häuten, aber sie sind einige Nachteile bei der Verwendung von innerem HTML. In HTML drückt Ihre Website zwei mögliche Cross-Site-Scripting oder XSS. Da Inline-JavaScript zu einem Element hinzugefügt werden kann. Mit anderen Worten, nimmt Inhalt ist nur sicherer, weil es das HTML-Tag entfernt. Das ist ziemlich technisch, also mach dir keine Sorgen, wenn du nicht verstehst, was Cross-Site-Scripting ein Thema einer anderen Sache für sich selbst ist. Für jetzt, nur verstehen Sie, dass Sie in HTML verwendet haben könnten. Es ist nur sicher, Textinhalte zu verwenden, was wir getan haben. Ich hoffe, Sie haben in diesem Vortrag eine Tonne gelernt. Aber wie immer haben wir noch einen langen Weg vor uns Bis bald. 25. Die appendChild(): Ich möchte, dass wir über ein schmerzhaftes Kind sprechen und Annelida etwas detaillierter reden, bevor wir weitermachen. Wie wir wissen, hängt die Verwendung dieser Methode Ihr Element an ein übergeordnetes Element. Wichtig ist jedoch, dass es immer die Elemente hinzufügt , um das verlorene Kind dieses bestimmten Elternteils zu werden. In dem Beispiel, das wir gerade zusammen codiert haben, wir gesehen, dass unser Körperelement bereits die H1 und die Skriptelemente als untergeordnete Elemente führt. Und das ist, warum, wenn wir das Schmerzkind verwenden, Ich werde Absatz Tag wurde aus dem R-Skript-Tag hinzugefügt, um sich zu erinnern. Sie könnten also sagen, dass dieser Absatz das jüngste Kind ist , falls Sie Mitte bekommen, die Edit aus dem Skript war. Lass mich einfach schnell zur Konsole springen und ich zeig es dir. Um Sie daran zu erinnern, hier war Opcode. Wir haben scheinbare Raphe erstellt und dann beendeten wir diesen Absatz zu unserem Körperelement. Also lasst uns zur Konsole gehen. Lassen Sie uns dieses Dokument überprüfen. Gehen Sie auf die Registerkarte Elemente, öffnen Sie den Körper und Boom, ich werde Absatz hinzugefügt, da das verlorene Kind es das jüngste Kind zu einem Körper Elternteil nennen wird. Das ist das Standardverhalten eines Schmerzkindes. Also gehen wir hin. Wir haben gerade gesehen, dass ein schmerzhaftes Kind und Zao Element oder schmerzt dieses Element als das jüngste Kind des Elternteils. Schlangenanimationen. Vielleicht denken Sie an dieser Stelle, Männer, habe ich nie die Kontrolle über die Art und Weise? Ich möchte dieses neu erstellte Element setzen. Die gute Nachricht ist, dass Sie die Kontrolle haben. Wir haben mehrere Methoden zum Hinzufügen von Elementen, wie ein Schmerzkind, das wir gesehen haben, einfügen und ersetzen Kind trifft. Ich möchte, dass wir uns jetzt ansehen, ist einfügen. Vor der Einfügung ist die Methode sehr einfach. Eine, die zwei Argumente braucht. Das erste Argument ist das Element, das Sie in Ihr DOM einfügen möchten. In unserem Fall wäre es das Absatz-Tag. Das zweite Argument ist ein Verweis auf das Geschwister, auch bekannt als das Kind des Elternteils, dem wir vorangehen möchten. Das bisschen verwirrt, betonen Sie nicht die Spitze über zum Texteditor. Und schauen wir uns diese Einfügung vor der Methode an. Wir sehen uns jetzt. 26. Die The – Beispiel: Ich hoffe, du hast es vergessen und das ist großartig. Das ist wirklich, wirklich. Und jetzt schauen wir uns an, wie einfügen vorher verwendet wird. Also erinnere dich an den Standardansatz und ich habe es auf dem Texteditor Feind nur ein wenig nach unten scrollen und zoomen. Dies ist unser Standardansatz. Denken Sie daran, dass wir ein Element erstellen, wir finden dann ein Elternteil und dann verwenden wir ein Pin-Kind. Es ist unser Stock zu erinnern, Lasst uns jetzt unsere Auszahlung für diesen Körper berühren, indem wir ein schmerzhaftes Kind benutzen. So Standardansatz, aber wir haben keine Kontrolle auf dem Weg. Wir wollen, dass das neue Element platziert wird. Also, jetzt möchte ich, dass wir diesen Code irgendwie optimieren und ich möchte, dass wir sehen, wie einfügen, bevor funktioniert. Also, mit anderen Worten, ich will nicht, dass wir einen bezahlten Job benutzen. Also lassen Sie mich das entfernen. Und ich möchte sagen, Yeah, dieses Mal, lassen Sie uns einfügen, bevor wir diesen Code löschen können. Und jetzt, wie funktioniert das? Wird der erste Schritt in dieser Methode ist, das Geschwister zu finden, das wir vorangehen gegangen sind. Wir wollen den Punkt finden, in den wir ein Absatz-Tag einfügen möchten. Und sagen wir, wir wollen unser Absatz-Tag auf dieses H1-Tag und einen Krebs einfügen, es wird vor diesem Skript-Tag sein. Macht das Sinn? Derzeit wissen wir, dass unser Absatz als sehr, sehr jüngstes Kind hinzugefügt wurde , also wurde er nach dem Skript-Tag hinzugefügt. Mehr, wir wollen, dass es vor dem Skript-Tag steht. Also der erste Schritt ist, hier zu sagen, lasst uns das Geschwister finden. Wir wollen fortfahren. Um dies zu tun, lassen Sie uns eine Variable namens Ungleichheit definieren, alles, was Sie wollen. Ich werde es nur das Skriptelement nennen, weil wir wissen, dass dies das Element ist, das wir vorher Absatz einfügen möchten. Und natürlich kennen Sie jetzt alle Zugriffsmethoden, wir können das Skript erhalten, indem Sie auf einen Abfrage-Selektor zugreifen. Und wir wissen, dass wir hinter diesem Skript-Tag her sind. Das ist also irgendwie cool. Es klebt eins von zwei. Jetzt haben wir die zweite Anweisung in Zustand zwei, und das ist die Verwendung der Einfügen verwenden Sie die Einfügemethode vor. Wie machen wir das? Denken Sie daran, ich sagte, wir finden unseren Elternknoten , der am Körperelement ist. Wir greifen auf seine Eigenschaft namens insert before zu, die zwei Argumente nimmt. Das ist das neue untergeordnete Element, das wir als neues Element definiert haben, das unser Absatz-Tag ist. Das zweite Argument ist das Element, das wir fortfahren möchten, in diesem Fall ja, es ist das Skriptelement. Los geht's. Und wenn wir das speichern, hoffentlich, wenn alles gut läuft, sollte es funktionieren. Also lassen Sie uns unsere Webseiten öffnen. Sie können sehen, unser Absatz ist immer noch hier. Lassen Sie uns das Dokument überprüfen. Öffnen wir diese Leiche. Und sie als unser Absatz, wie cool ist das? Ich hoffe, Sie sind, und das ist so genial, denn jetzt haben wir unseren Absatz vor dem Skript-Tag platziert . Sehr, sehr cool. Ich hoffe, du hast Spaß. 27. Ist eine an: Bevor wir weitermachen, möchte ich nur noch ein paar weitere Dinge über diese Insert-Perform-Methode erwähnen . Ausgangspunkt ist, wie immer, um den DOM-Baum zu zeichnen. Also, hier geht's, Wir wissen das. Und das Standardverhalten ist, dass, wenn wir ein schmerzhaftes Kind für das Körperelement verwenden, es unseren Absatz als das jüngste Kind malen wird. Mit anderen Worten, es wird diesen Absatz nach diesem Skript-Tag malen. Manchmal wollen wir als Entwickler mehr Kontrolle, nicht wahr? Und in unserem Beispiel wollten wir ihren Absatz vor diesem Skript-Tag zwischen 81 und dem Skript einfügen. Und wie haben wir das gemacht? Das ist richtig. Wir haben einfügen vor auf dem body Element innerhalb angegeben, dass die neuen Elemente, anderen Worten, dieses Absatzelement sollte vor unseren Skriptelementen eingefügt werden. Es war so einfach und ich könnte denken, okay, cool, das ist irgendwie eine seltsame Art, denn, warum sollten wir die neuesten Geschwister finden und vorher eingefügt haben müssen? Sicher? Sicherlich müssen sie auch eine Wendeschneidmethode sein. Wie sich herausstellt, ist keine Einfügung nach Methode. Ich weiß nicht, warum. Es ist genau so, wie es ist. Und das bedeutet, dass es keine weit verbreitete integrierte Möglichkeit gibt, ein Element eines Elements anstelle von vorher einzufügen. Aber nicht betonen, wir können den Browser tricksen, indem wir die Einfügemethode vor mit der nächsten Geschwistermethode kombinieren . Was bedeutet das? Nun, es bedeutet nur, was wir tun, ist, dass wir ein Element vor dem zusätzlichen Element einfügen , das wir gerade hinzugefügt haben? Das ist ein bisschen verwirrend. Lassen Sie mich Ihnen zeigen, was ich meine. Also haben wir eine Leiche, wir haben unser H1 und wir haben unser Drehbuch. Und nehmen wir an, dass wir eines Tages nicht einmal Text in dieser Hedge haben, wir haben buchstäblich nur ein leeres H1-Tag bekommen. In diesem Fall wird unser Element das eine sein und das nächste Geschwister dieses H1 wird dieses Skript sein, richtig? Also alles, was wir dann tun wollten, ist , dass wir diesen Absatz vor dem nächsten Geschwister H1 einfügen wollen . Mit anderen Worten, bevor dieses Skriptelement auf der Bühne immer noch Ihren Kopf kratzen könnte. Also lasst uns zur Konsole springen und ich zeige euch das in Aktion. 28. Tricking Ein-: Ich möchte, dass wir wieder zu den Grundlagen zurückkehren. Also habe ich den ganzen Code vor uns, der alles andere entfernt ist. Und wieder, wenn wir zu unserem Browser zurückkehren, haben wir nur MRL. Und es ist das, was wir haben. Wir haben das Paar nicht mehr abgekriegt. Okay, gehen wir zurück zu Visual Studio Code. Jetzt. Ich möchte, dass wir einen Schritt zurück gehen und darüber nachdenken, was wir tun wollen. Wir haben unser H1 und wir haben unsere Skript-Tags, richtig? Und wir wollen diesen Absatz vor dem Skript-Tag hinzufügen? Ja, wir können die Methode einfügen vorher verwenden. Aber manchmal wird Ihr Code so kompliziert. Manchmal möchten Sie tatsächlich etwas in etwas einfügen. Und wie gesagt, es gibt keinen Einsatz von der Methode, weshalb ich möchte, dass wir nur ein schnelles, schnelles Beispiel durchlaufen. Also das erste, was ich tun will, ist, wenn ich einmal den Körper und H1-Tag greifen will, es ist das erste, was ich tun möchte. Also Liste definieren Sie eine H1-Elementvariable als unser H1-Tag. Und ich werde nur die Abfrage-Selektoren verwenden. Und wir wissen, dass das die 81. Und natürlich kann ich genau das Gleiche tun. Ja, aber ich wollte jetzt das Körperelement finden. Und das wird natürlich der Body Tag sein. Also würden sie wirklich schnell durchgehen. Jetzt möchte ich, dass wir den Einsatz vor der Funktion tricksen. Jetzt, um dies in super voller Funktion zu täuschen, möchte ich ein neues Element nach dem Element erstellen. Und dann haben wir noch das H1-Element. Ich zeige dir, was ich meine. Also möchte ich eine neue Variable namens H1 definieren. Das ist cool es bis zum nächsten Element. Und ich möchte, dass wir auf unser H1-Element zugreifen. Und ich möchte emittiert anrufen. Denken Sie daran, das nächste Element Geschwistermethode. Wir haben das durchgemacht, Sie bemerken, dass es das nächste Element Geschwister findet. Ich will nur sagen, ja, ich könnte einfach das nächste Geschwister gebrauchen. Ich muss keine nächsten Elemente Geschwister verwenden. Ich möchte nur mehr mitteilen, was ich tue. Nächste Elemente Geschwister wird buchstäblich das nächste Element greifen. Geschwister, die dieses Skript-Tag bei sind, werden nicht aufgenommen, es braucht Notizen. Das ist der einzige Grund, warum ich es getan habe. Jetzt will ich nur noch auf unser Körperelement zugreifen. Ich möchte diesen Einsatz vor der Funktion verwenden. Und denken Sie daran, dass der Einsatz vor zwei Argumenten nimmt. Das erste Argument ist unser neues Element, das wir in das DOM setzen wollen. Und das zweite Argument ist, dass Referenz-Geschwister, in diesem Fall, ja, wir haben es als H1 definiert, nächstes Element. Wie cool ist das? Heute gehen wir, wir haben es buchstäblich getan und ich werde zum Stöbern schießen und ich werde Ihnen zeigen, dass es tatsächlich funktioniert hat. Aber nehmen Sie einfach zurück und denken Sie darüber nach, warum es ist, dass wir dies tun wollen. Nun, der einzige Hauptgrund, warum ich es benutze, da du manchmal nicht immer weißt, was das nächste Geschwister in deinem Code ist. Und deshalb behandeln wir es mit einem Baum. Schnappen Sie sich das aktuelle Element, das wir auf, in diesem Fall ist es H1-Tag. Wir greifen dann auf die nächste Geschwistermethode zu. In unserem Fall verwenden wir nächste Elemente Geschwister, die wir Nick Geschwister verwenden können. Und dann behandeln wir einfach die Insert-Leistung, indem wir die nächsten Elemente Sibling verwenden, die wir gerade erstellt haben. Und dann klingt Hertz aber komisch, aber vertrauen Sie mir, und manchmal müssen Sie diese Art von Gebrauch dieses Auto zugelassen. Um ein Element an der gewünschten Stelle in das DOM einzufügen. Aber lassen Sie mich Ihnen zeigen, dass es tatsächlich funktioniert hat. Bevor wir zum nächsten Bild gehen. Sehen Sie, wie wir das bekommen haben. Gehen Sie einfach zum Browser. Lassen Sie uns das Element inspizieren. Gehen wir zu den Elementen. Es öffnet sich die Leiche und sie, wir haben sie. Unser Absatz wird vor diesem Skript-Tag eingefügt. Mit anderen Worten, das wird nach dem H1-Tag eingefügt. Also ich hoffe, Sie haben viel ARPU gelernt, diese lustig und intuitiv zu finden. Und wir sehen uns in der nächsten Vorlesung. 29. So entfernst du Elemente von DOM: Sie sind auf unglaubliche, unglaubliche Art und Weise gekommen. Sie wissen jetzt, wie Sie Elemente erstellen und sie dem DOM hinzufügen. Und natürlich ist der letzte Schritt jetzt zu lernen, wie man Knoten aus dem DOM entfernt. Und direkt von der Fledermaus, ich möchte nur sagen, dass wir ein paar Methoden zur Verfügung haben, um Gegenstände aus dem DOM zu entfernen. Die erste, die ich möchte, dass wir uns ansehen, heißt entfernt Kind. Werfen wir einen Blick darauf, wie das funktioniert. Willkommen zurück zu diesem bewährten Code. Hoffe, du hast jetzt Spaß, wer würde eine Tonne lernen? Wir wissen jetzt, wie Elemente zu erstellen und zu bearbeiten, um das DOM. Natürlich müssen wir jetzt lernen, wie wir ihn entfernen können. Und wie ich gerade sagte, eine der Methoden, die uns zur Verfügung stehen , als das sogenannte Entfernen von Kindesätzen. Wenn ich jetzt schauen möchte, Hier sind wir, wir haben unsere neu erstellten Absatz-Tag. Das erste, was ich tun möchte, ist, dass ich diese Absatzelemente zum DOM hinzufügen möchte, um sich daran zu erinnern, wie das geht. Nun, zuerst als Schriftart, alle Körperelemente, greifen wir auf unser Dokument zu, diesen QuerySelector. Wir greifen unser Körperelement. Und natürlich greifen wir auf unsere Körperelemente zu. Und in diesem Fall sind wir nicht zu schnell über die Art und Weise, wie wir dieses Absatz-Tag platziert. So können wir einfach auf diese Append Child-Methode zugreifen. Und wir können unsere Elemente erhalten. So einfach. Wenn wir diesen Tag speichern wir gehen, haben wir einen Absatz zum DOM hinzugefügt. Und ich weiß, es scheint konterintuitiv zu sein, aber lassen Sie uns jetzt diesen Absatz aus dem DOM entfernen. Und wie machen wir das? Nun, es kann nicht einfacher werden als das, was ich Ihnen gerade zeigen werde. Alles, was wir tun müssen, ist, dass wir auf unseren übergeordneten Knoten zugreifen müssen. In diesem Fall ist es das Körperelement. Dann müssen wir auf eine seiner Methoden zugreifen. Und die Methode, die wir auf den Rest zugreifen möchten, heißt entfernen Kind. Und das Kind, das wir entfernen möchten, ist, dass Spuren auf neu erstellten Absatzelementen. So können wir einfach Element entfernen. Und wenn ich das rette, sieh dir das an, sie ist weg, sie ist raus. Wir haben buchstäblich einen Gegenstand aus dem DOM entfernt und um es Ihnen zu beweisen, lassen Sie mich in den Browser gehen, hören, sprechen Sie dieses Dokument. Lasst uns das ein bisschen größer machen. Und Sie können hier sehen, das ist buchstäblich unser Körper-Tag. Wenn wir öffnen, dass Apathie ein normales Absatz-Tag ist, haben wir es buchstäblich aus dem DOM entfernt, so gut gemacht. Sie haben gerade Ihre erste Methode verwendet. Und ich habe dir gesagt, dass es nicht so schwierig ist. Das wie immer, diese mehr als eine Möglichkeit, eine Katze zu häuten. Und ich möchte noch ein paar Dinge darüber erwähnen. 30. Die Verwendung von parent-Node mit dem parentNode: Wie gesagt, ich möchte nur ein wenig mehr über diese Methode zum Entfernen von Kindern sprechen. Die Hauptsache ist, dass wir entfernen Kind vom Elternteil des Kindes nennen müssen. Wir wollen entfernen. Mit anderen Worten, diese entfernte untergeordnete Methode wird unser DOM nicht nach oben und unten reisen , um das Element zu finden, das wir entfernen möchten. Nehmen wir an, wir haben keinen direkten Zugriff auf die Elemente, die Eltern sind, und wir wollen keine Zeit damit verschwenden, es zu finden. Was können wir tun? Nun, wir können dieses Element immer noch sehr leicht entfernen, indem wir die übergeordnete Knoteneigenschaft verwenden. Mit anderen Worten, wir verwenden nur die übergeordnete Knoteneigenschaft. Und in on net Eigenschaft greifen wir auf die entfernte untergeordnete Methode zu. Lassen Sie mich Ihnen zeigen, was ich meine. Alles klar, also los geht's. Hier ist unser Code. Denken Sie daran, dass wir dies gerade getan haben, bevor wir das Entfernen Kind auf einem Körperelement verwenden. Das, was, wenn wir nicht unbedingt wissen, was das Elternteil von dem Element ist, das wir entfernen möchten. Mit anderen Worten, wir hatten tatsächlich Körperelement mit was definiert? Wenn wir nicht wissen, was das ist? Nun, in diesem Fall können wir, wie gesagt, auf den übergeordneten Knoten zugreifen und dann das Kind auf ihrem übergeordneten Knoten entfernen. Wie würden wir das tun? Wie sich herausstellt, ist es super einfach. Wir greifen unser Element, das wir entfernen möchten. Und es scheint irgendwie seltsam zu sein, so zu beginnen. Das tun wir innerhalb des Zugriffs auf seine übergeordnete Knoteneigenschaft, die uns sein übergeordnetes Element gibt. Und dieser Elternteil. Dann sagen wir, okay, cool, dann entfernen wir dieses Element selbst. Ich weiß, dass es ein bisschen ein Kreisverkehr ist, aber so müssen wir es mit diesem Ansatz tun. Wenn ich das speichere und wir unseren Browser aktualisieren, sollten wir keine Änderung sehen. Denken Sie daran, wenn ich diesen Code auskommentiere, haben wir unseren Absatz im Browser. Wenn ich das wieder einnehme, wenn ich nicht kommentiert und wir den Leser speichern , entfernt dieser literarische Absatz aus unserem DOM. Hoffe also, dass es intuitiver wird. Es gibt noch eine Sache, die ich nur besprechen möchte, Süße. 31. Die Methode für die entfernung (): In Ordnung, mit Bakterien und ich kodiere, haben wir uns gerade CG entfernt Kind angesehen. Etwas, das ich erwähnen muss, weil ich nicht einmal entferntes Kind mehr so viel benutze. Und der Grund ist, dass wir eine sehr dicke und eine sehr neue Möglichkeit haben, Elemente aus dem DOM zu entfernen. Und das wird uns direkt aus der DOM-API zur Verfügung gestellt. Was ist diese Methode? Es ist super einfach, es ist nur kalt zu entfernen. Also, ja, wir haben gerade ein Beispiel gemacht. Lassen Sie mich Ihnen zeigen, wie die Remove-Funktion funktioniert. Und es kann nicht intuitiver und einfacher werden als das. Alles, was wir tun müssen, ist xy Seite und wir wollen in diesem Fall entfernen, nun, lassen Sie mich einfach speichern. Dann können Sie Absatz verkaufen ist im Browser. Ich möchte es jetzt entfernen, alles, was wir tun müssen, ist auf unser neues Element zuzugreifen. Auf diesem Element haben wir gerade aus der Box und Methode entfernen genannt. Und wenn ich das rette, Boom, ist es weg. Wie einfach und intuitiv war das? War das? Warum beginne ich nicht damit, Ihnen einfach zu sagen, was die entfernende Methode überhaupt war, und wir können sogar die entfernte Kindmethode vergessen. Nun, ich weiß nicht, die beiden Hauptgründe zu summen, die mir fehlten, alle Methoden einschließlich aller zu diskutieren. Die erste ist, es gibt Ihnen ein intuitiveres Verständnis auf dem Weg wir, wie wir dorthin gekommen sind, wo wir jetzt sind. Mit anderen Worten, es hilft uns nur, unseren Code besser zu verstehen. Du wirst auch auf alte Karte stoßen. Es hat diese entfernen Kind und du wirst so bekommen, was ist das? Das ist der erste Grund. Der zweite Grund, warum ich es am Anfang nicht erwähnt habe , ist , dass Browser die remotion-Methode unterstützen, eine sehr neue Methode ist. Das bedeutet, dass einige der älteren Browser es nicht unterstützen. Wenn Sie also extra sicher sein möchten, verwenden Sie die Methode „remove child“. Wenn du willst, dass es wie ich ist, neue Zeitalter, du willst irgendwie verstehen, wie die alten Ansätze funktionieren, aber nicht wirklich, sie bleiben bei der Entfernungsmethode. Das ist es, was ich benutze. Und glaub mir, 95 Prozent der Zeit, es ist absolut in Ordnung. Und die Methode entfernen, wie Sie gerade gesehen haben, war viel intuitiver und ermöglicht es uns, direkt auf das Element zuzugreifen und einfach zu entfernen. Es tut wirklich weh, wirklich einfach. Aber wichtig ist, unabhängig von der Methode, die Sie wählen, erlauben uns beide Methoden, ein DOM-Element zu entfernen, einschließlich diejenigen, die ursprünglich in unserem HTML-Markup waren, nicht nur dynamisch erstellt, sobald das wichtig ist. Eine andere Sache erwähnenswert ist, dass das DOM-Element, das wir entfernen, viele Kinder und Enkelkinder hat. Diese werden auch entfernt werden. Es ist also eine ziemlich gefährliche Methode, die nur einen Punkt trifft, der herauskommt, bevor Sie alles entfernen und dann herausfinden, dass buchstäblich alles entfernt wird. Also gehen wir hin. Dann haben Sie einen Tokyo, der viel Spaß hat. Und übrigens, wenn Sie sich fragen, was diese Boxen sind, sind es zunächst Trek uns. Es ist buchstäblich Weihnachten Grillen teilen. Ich schaue mir den 22. alten Behinderter drei Tage vor Weihnachten an, aber ich liebe dieses Zeug und das ist Lachen General. Vielleicht machen Sie ein paar Dreharbeiten. Ich, gehe weiter mit meinem Kurs, denn wenn ich das zusammenstelle, weißt du, und liebe es, als hätte ich es wirklich genossen, Unterzeichner zu hören. Hoffe, dein Weihnachtsfest war gut. Und wir sehen uns in der nächsten Vorlesung. 32. Cloning: Ich bin super aufgeregt über diesen Abschnitt. Wir gehen wieder zu etwas, das wir wirklich, wirklich genial. Was, entschuldigen Sie, eine Konstante, weil es wirklich cool ist. Ich meine, wieder, ich gehe jeden Tag von einem Betrüger behandeln es. Was für ein Verrückter. Jedenfalls werde ich versuchen, dort abzuholen, wo wir aufgehört haben. Was Sie sagen, war, dass dieser Link über das Klonen, über das Replizieren von Dingen sein wird. Dass Sie mit einem einzigartigen und einer der Art beginnen können. Es wird also super interessant sein. Was ist mit Kaffee? Ich hoffe, du tust es auch. Und es schließt sich später an, lehnen Sie sich zurück, entspannen Sie sich und lassen Sie uns knacken. Siehe anonym. Woo Hoo. Dieser Abschnitt erhält nur immer WIDA. Und wenn, je weiter wir hineinkommen, nicht. Aber zum Glück haben wir so ziemlich im letzten Abschnitt, wenn es darum geht, das DOM zu manipulieren, die eine verbleibende DOM-Manipulationstechnik, die wir beachten müssen , ist eine, die sich um das Klonen von Elementen dreht. Und mit Trainingselementen meine ich nur, identische Replikate eines bestimmten Elements zu erstellen. Aber wow, wird das komisch? Es ist fast so, als würdest du denken, du hättest einen einzigartigen Fingerabdruck. Und plötzlich stellte er fest, dass es eine ganze Menge von anderen identisch gibt. Und dieser Fingerabdruck, dein Fingerabdruck war einmalig. Und das ist die ganze Idee über das Klonen. In Ordnung, die geneigte Wand, wie klonen wir, ist ziemlich einfach. Wir verwenden eine Methode namens Klon-Knoten auf dem Element, das wir replizieren oder klonen möchten. Aber halten Sie an Ihren Pferden fest. Es gibt noch eine Sache, die wir tun müssen. Wir müssen diese Methode ein wahres oder falsches Argument zur Verfügung stellen. Und das gibt an, ob wir nur das Element klonen wollen, ob wir das Element und alle seine Kinder klonen wollen. Wenn Sie ein Element sowie alle untergeordneten Elemente klonen möchten, übergeben wir den Wert true in diese Methode. Wenn Sie nur das Element selbst auf der hohen Ebene replizieren möchten, übergeben wir das Argument false. Und jetzt denken Sie vielleicht, Cool, verstehen Sie, wie es funktioniert, aber warum sollten wir jemals etwas klonen wollen? Machen Sie einfach einen Schritt zurück und denken Sie, wenn es ein Szenario gibt , in dem diese Art von Wiederholung auf Ihrer Website, dann wäre das Klonen von Vorteil. Angenommen, Sie haben eine dynamische ShoppingList und jedes Mal, wenn ein Benutzer einen Artikel zur ShoppingList hinzufügt, wird er dem Warenkorb hinzugefügt oder einer Liste hinzugefügt. Das ganze LI-Tag und alle Stile und die Kinder, die Sie darauf haben. Wenn Sie dies tun, wird es großartig sein, wenn Sie es einfach jedes Mal klonen könnten , wenn der Benutzer auf die Schaltfläche Hinzufügen klickt, richtig? Wie es Sinn macht, Es ist eigentlich ziemlich intuitiv. Aber an dieser Stelle kratzst du dir wahrscheinlich den Kopf. Keine Sorge, springen wir in die Konsole und fangen wir an zu programmieren. Lassen Sie uns anfangen zu sehen, wie diese Methode funktioniert. Ich bin super, super aufgeregt, dich jetzt zu sehen. 33. Klonieren – Beispiel: Alles klar, es ist Zeit für ein praktisches Beispiel. So können Sie im Hintergrund sehen, dass ich Code habe und zurück in Visual Studio Code. Zieh das runter. Ich habe nur einen H 1,5 a Absatz. Und wenn ich dir zeige, wie das aussieht, wenn wir unseren Bildschirm hierher stellen, dann ist das alles. Einfach, ist nichts anderes zu ihm. Es ist alles, was ich tun will. Nun, sagen wir, wir wollen diesen Absatz replizieren. Mit anderen Worten, wir wollen das irgendwie einfach, oder? Aber ich weiß nicht, statisch in den HTML eingegeben. Ich möchte, dass dies dynamisch hinzugefügt wird, und ich möchte, dass wir diesen Absatz klonen. Wie würden wir es tun? Nun, darum geht es in dieser Vorlesung. Also lasst uns hineingehen. Lassen Sie mich diese Absätze einfach streichen. Und hier haben wir eine späte Programmierung bekommen. Das erste, was ich tun möchte, ist, dass ich diesem Absatz eine Klasse hinzufügen möchte. Und lassen Sie uns eine Klassennachricht nennen. Wir können es nennen, wie immer wir wollen. Und jetzt möchte ich, dass wir unser JavaScript hinzufügen. Jetzt die zwei Dinge, die ich tun möchte. Erstens möchte ich definieren, wo wir den Absatz setzen wollen , und wir wollen ihn in den Körper bringen, keine Sorge. Wir wollen, dass es ein Kind des Körpers ist. Also brauche ich einen Zugang zu unserem Körperelement. Das zweite, was wir tun müssen, ist, dass ich definieren muss, was wir klettern wollen. Und in diesem Fall wollen wir das Absatz-Tag klonen. Ich hoffe, das macht Sinn. Der erste Schritt besteht also darin, unser Körperelement sowie das Element zu greifen , das wir klemmen möchten, was das Absatzelement ist. Einen Sinn ergeben? Also lassen Sie uns unser Körperelement als Körperelement Variable definieren. Und wir können das auf eine Reihe von Möglichkeiten ergreifen. Wir haben als wirklich im Kurs gesehen, sollten Sie ein gemeistert dies bereits sein. Das erste, was wir tun müssen, ist wie immer, auf das Start-Stammelement unseres DOM zuzugreifen, das dieses Dokumentobjekt mit unserem Netz ist, wir haben eine Fülle von Methoden, die uns zur Verfügung stehen. Die 10, 12 Jahre ist jetzt der QuerySelector. Und natürlich wollen wir dieses Körperelement bekommen. Wir werden das Gleiche tun. Aber für den Absatz nennen wir es einfach para Element. Und wieder begannen wir das Dokument. Jetzt können wir den Abfrage-Selektor verwenden. Wieder wollen die Dinge vermischen. Und deshalb dachte ich, ich würde dort einen Kurs machen. Und wie wir wissen, hat es eine Klasse von Botschaft. Heute haben wir Schulden. Unser allererster Schritt, das nächste, was ich tun möchte, ist, dass ich eine Funktion ausführen möchte. Und diese Funktion wird dieses Absatz-Tag dynamisch auf unserer Webseite hinzufügen. Wenn Sie nicht wissen, welche Funktionen sind, wie man in der Syntax schreibt, habe ich einen tatsächlichen ganzen Kurs über JavaScript und wie Funktionen funktionieren. Wenn Sie interessiert sind, wissen Sie, gehen Sie los. Wenn nicht, kein Stress. Ich werde sowieso einen Schwanz mit dir schreiben. In Ordnung, also fangen wir an, unsere Funktion zu definieren. Lassen Sie uns definieren unsere, und nennen wir es moderne Apps sagen, welche Funktion qualitative wir wollen. Ja, wir verwenden das Funktionsschlüsselwort in JavaScript. Wir definieren dann den Namen unserer Funktion, das heißt, was? Innerhalb der beiden geschweiften Klammern, hier haben wir tatsächlich das Fleisch unseres Codes. Das erste, was ich tun will, ist, dass ich herausfinden wollte, was unser Klontext ist. Definieren wir eine Variable namens geklonten Text. Und was wollen wir klonen? Das ist richtig, wir wollen unseren Absatz klonen. wir nicht para-Element war, es sei denn, Element können wir jetzt auf unsere Klon-Knoten-Methode zugreifen. Denken Sie daran, dass ich in der vorherigen Vorlesung die Knotenmethode klonen werde. Und erinnerst du dich an das Argument, das wir brauchten, um diese Methode bereitzustellen? Lassen Sie uns schreiben, wir mussten einen booleschen Wert bereitstellen, entweder wahr oder falsch. Was denkst du, sollten wir hier hinlegen? Ich möchte, dass du darüber nachdenkst. Ich möchte, dass Sie überlegen, ob wir dieses Argument hier, in diesen Klon-Knoten, wahr oder falsch setzen müssen . Machen Sie einen Schritt zurück. Was klonen wir? Klonen Sie diesen Absatz. Und der Absatz sitzt unter diesem H1-Tag, nicht wahr? Hat der Absatz Kinder? Es ist ein bisschen eine Trickfrage und Sie denken vielleicht, dass es keine Kinder hat, in diesem Fall sollten Sie falsch machen. Aber das wäre falsch. Das werde ich dir vorerst am nächsten Tag zeigen. Es hat Kinder. Es ist tatsächlich bekommen, dass Knoten als Kind nimmt. Also müssen wir das Argument wahr übergeben. Also gehen wir hin. Zu diesem Zeitpunkt haben wir buchstäblich unseren Text awesome Rechte Bit geklont. Ähnlich wie, wenn wir die create Element Methode verwenden. Denken Sie daran, wie es einfach in sonnigen ganz von selbst schwebt. Dasselbe wird hier passieren. Wir haben dieses Klon-Geschmackselement erstellt, diesen Absatz. Dann schwimmt es einfach herum. Wir müssen es einem Elternteil anhängen. Und genau deshalb mussten wir dieses Körperelement erstellen. Sie müssen ein wenig nach unten scrollen, damit Sie sehen können, da gehen wir. Alles, was wir jetzt tun müssen, ist, dass wir auf unser Körperelement zugreifen müssen. Wir haben heute Neuigkeiten, die Append-Kind-Methode, bei der wir nicht genau das tun müssen, was wir hier tun werden. Und natürlich ist das Argument oder das Kind, das wir anhängen möchten, unser geklonter Text. Das ergibt keinen Sinn. Aber zu diesem Zeitpunkt, wenn wir einfach hier aufhören und wir zum Browser gehen, passierte nichts für uns und wir können das Dokument überprüfen. Und wir können unseren Körper öffnen. Und Sie können sehen, dass wir nur einen Absatz haben. Es gibt keinen zweiten Absatz. Wir haben nichts getan. Mit anderen Worten, wir haben keine Dysfunktion ausgeführt. Wir haben die Funktion erstellt, aber wir haben sie nicht ausgeführt. Und wie will ich das machen? Oder wir könnten die Funktion einfach durch Abkühlen ausführen, sagen wir Wasser hier drüben. Wir können zu unserem Browser zurückkehren, und dort gehen wir. Wir haben buchstäblich einen Absatz zu unserer DOM-Alkalose hinzugefügt. Aber ich möchte es dynamisch machen und ich wollte alle 1 Sekunde weitermachen . Also, wie würden wir das tun? Gehen wir zurück zu unserem Code. Und ich möchte jetzt eine DOM eingebaute Methode namens sic Intervall verwenden. Also hier lassen Sie uns eine Schraube in DOM-Funktion verwenden, die übrigens aus dem Fensterobjekt stammt. Um unser sagen, welche Funktion alle 1 Sekunde auszuführen . Und die Methode, die ich verwenden möchte, heißt Sitzintervall. Und nur ein bisschen eine Fliege, viele Leute, und wenn Sie anfangen, Sit-Intervall zu googeln, denken sie, es ist eine JavaScript-Methode. Es ist keine JavaScript-Methode. Es kommt wieder aus dem Fensterobjekt in unserem DOM. Also hier ist nur ein paar Informationen für Sie, die Sie in der nächsten Party-Ära löschen können. Sit Intervall Methode nimmt zwei Argumente. Das erste Argument, das benötigt wird, ist der Handler. Mit anderen Worten, es ist die Funktion, die Sie ausführen möchten. Wir wollen die ausführen, sagen, welche Funktion, nicht wahr? Das zweite Argument ist, wie oft wir wollen, dass diese Funktion das Timeout ausführt. Ja, wir wollen diese Funktion alle 100 Millisekunden ausführen, also alle 1 Sekunde. Wenn ich das jetzt speichere und wir zu unserem Browser gehen, schauen Sie, was passieren wird. Ja, du musst das einfach abschalten. Lassen Sie mich erfrischen. Sieh mal, was los ist. Ein Hub, der dir den Verstand weht. Wie cool ist das? Und wenn wir Elemente auf unserer Seite inspizieren und wir öffnen, dieser Körper wird nur aktualisiert, paaren Sie es und beginnen Sie wieder. Bei uns. Sehen Sie sich ihren Absatz an, der unserem DOM hinzugefügt wird. Dynamisch. Whoo, Das ist genial als erwachsener Mann, Hoffnung Jahre Hampton aufgeregt, wie ich buchstäblich manipulieren die DOM on the fly. Es ist automatisch, verblüfft meinen Verstand. Ich finde es toll. Etwas, das ich Ihnen zeigen möchte, dass schnell ist, wenn wir zu unserem Code zurückkehren, wenn wir den Kopf falsch als unser Argument hier laufen, was denkst du, würde passieren? Glauben Sie, der Absatz würde dem DOM hinzugefügt werden? Sie haben vielleicht nein gesagt, aber tatsächlich ist der Absatz immer noch im DOM bearbeitet. Aber ohne Jordan intuitiv zu sein, sind es TXT-Kinder. Es braucht keine, es ist wirtschaftlicher Sinn. Wenn wir jetzt auf unsere Seite zurückgehen, können Sie sehen, dass unsere Seite selbst nicht aktualisiert wird , weil es keinen Text innerhalb des Absatzes gibt. Aber wenn wir dieses Dokument überprüfen und mich aktualisieren lassen. Sie können in Ihrer Konsole in Ihrem DOM sehen , dass Absatz alle 1 Sekunde bearbeitet wird. Hoffe, es macht Sinn, dass ich in der nächsten Vorlesung diesen Code genauer betrachten und nur zusammenfassen möchte, was wir getan haben. 34. Analysieren von clone: Ich möchte, dass wir nur einen Schritt zurück und verstehen, was es ist, wir gerade getan, weil es so ein cooles und interessantes Thema tut und nominee andere Tutorials, die auf Kurse gefunden werden. Wenn ein diese Art Zeug bedeckt hat. Also hoffe ich, Sie haben ihren brennenden Spaß geschätzt. Aber wie auch immer, das Geheimnis dessen, was vor sich geht, liegt in unserem Code. Lassen Sie uns tatsächlich besser passieren. Und speziell müssen wir nicht über das H1 sprechen und der Absatz macht eine ziemlich unkompliziert. Was wir tun müssen, ist, dass wir zurück in unser Skript-Tag springen müssen. Und wir müssen uns einen Moment Zeit nehmen, um zu verstehen, was los ist. An der Spitze haben wir unser Körperelement variabel. Das erste, was wir tun, ist, dass wir unsere Körperelementvariable definieren. Und das verweist auf das Body-Element in unserem HTML. Ziemlich unkompliziert. In ähnlicher Weise definieren wir unsere übergeordnete Elementvariable und verweist dann auf unser Absatzelement mit einem Klassenwert von message ist hier nichts zu Besonderes, Sie sollten damit sehr vertraut sein. Hier wird die Dinge interessant und funky. Wir haben unsere eingestellte Intervall-Timer-Funktion, die die Funktion „sagen“ alle 100 Millisekunden, alle 1 Sekunde aufruft . Es ist darin, sagen Sie, welche Funktion wo das eigentliche Klonen stattfindet. Sie könnten also sagen, der wichtigste Teil des Codes für uns ist dies. Sagen Sie, welche Funktion? Wie funktioniert das? Will wieder, definieren wir eine Variable namens geklonten Text. Und wir weisen zu, dass der Wert unserer geklonten eliminiert. Um ein Element zu klonen. Alles, was wir taten, war, dass wir die Klon-Knoten-Methode für unser Absatzelement verwendet haben. Das Ergebnis, dass wir dies tun, ist, dass eine Kopie unseres Absatzelements jetzt erstellt und als Teil der geklonten Textvariablen gespeichert wird. Der letzte Schritt ist für uns, unsere neu gedrehten in Schwung zu den Schlafsälen hinzuzufügen , so dass es auftaucht. Denken Sie daran, ohne dies zu tun, ist es einfach im Namen herumschweben, es ist verloren. Wir müssen es an einen Elternteil anhängen. Das macht Sinn. Und deshalb greifen wir auf das Element des Elternteils zu. Wir verwenden dann diese Mal-Kind-Methode, die wir in früheren Vorlesungen gesehen haben. Und natürlich fügen wir den geklonten Text zu diesem Körperelement hinzu. Und dank unseres eingestellten Intervalls, der gesamte Code unter der sagen, welche Funktion wiederholt, um das Hinzufügen zu halten, sind geklontes Element auf der Seite. Und natürlich, das letzte, was Sie bemerkt haben, war, dass wir den Wert wahr oder falsch übergeben haben. Yaks, es ist das letzte Beispiel, das wir gezeigt haben, aber wir haben tatsächlich true als Argument in diese Klon-Knoten-Funktion pausiert. Warum haben wir das getan? Unser Absatzelement scheint keine Kinder zu haben, oder? Nun, hier kommt die Unterscheidung zwischen Elementen und Knoten ins Spiel. Unser Absatz-Tag hat keine untergeordneten Elemente oder Elemente, dass der Text innerhalb des Absatz-Tags tatsächlich ein untergeordneter Knoten ist. Insbesondere nimmt ein untergeordnetes Element Knoten. Und dieses Detail ist sehr wichtig, im Auge zu behalten, wenn Sie ein weiches Klonen etwas finden und nicht erwarten, zu sehen, was Sie getan haben. Ich hoffe, das macht Szenen. Ein Hub kommt jetzt intuitiver zu Ihnen. Und vor allem hoffe ich, dass du Spaß hast. 35. Final Class – Intro: Ich dachte, es würde Spaß machen, nur eine andere Übung zu machen, um das, was Sie gelernt haben, anzuwenden. Sie können hier im Hintergrund sehen, ich habe eine sehr einfache Seite namens coole Tiere. Und darunter habe ich eine ganze Menge von Listeneinträgen. Und was ich möchte, dass Sie darüber nachdenken, wie Sie diese Listenelemente dynamisch zur Seite hinzufügen können , wie ich es getan habe. Also werde ich Ihnen den Code zeigen und werden in der Vorlesung zur Verfügung gestellt. Sie können einen Roman herunterladen. Aber das ist der Ausgangspunkt. Sie können nur bei einem sehr einfachen CSS sehen. Und wenn wir nach unten scrollen, kommt hier der Kern der Übung ins Spiel. Ich habe ein 81 und ein UL-Tag. Ziemlich unkompliziert. Dann habe ich R-Skript, ich habe unser JavaScript, Finden Sie ein Array namens Tiere. Das habe ich getan. Ich möchte, dass Sie alle diese Elemente dynamisch innerhalb dieses UL-Tags hinzufügen . Mit JavaScript. Kannst du herausfinden, wie es geht? Sie wissen, wie Sie auf das DOM zugreifen, Sie wissen, wie Sie Elemente erstellen, Sie wissen, wie Sie diese Elemente in das DOM einfügen und ihm eine Diode geben. Und in der nächsten Vorlesung zeige ich Ihnen, wie ich es gemacht habe. Es ist wirklich nicht so schwierig, aber es sollte nur verstärken oder ablenken, ja. 36. Final Class – Lösung: Hast du es mal ausprobiert? Ich hoffe es. Und Sie werden hier sehen, wie intuitiv und einfach es tatsächlich ist, wenn Sie all diese Methoden verstehen, es macht wirklich Spaß. Also lasst uns hineingehen. Was ist das Erste, was wir tun müssen? Nun, versuchen wir es. Wir müssen definieren, wo wir dieses LI-Tag setzen wollen, in das wir erstellen werden. Denken Sie daran, dass wir es offensichtlich gesetzt, in diesem Fall ist unser Elternteil das alt-Tag. Also der erste Schritt ist, lassen Sie uns eine URL definieren. Nennen wir es UL-Element. Und wir können es buchstäblich finden. Wir können ihm einen Wert zuweisen. Ja, wir haben angefangen zu dokumentieren. Dies ist die Wurzel unserer Seite. Wir greifen auf eine Methode namens QuerySelector zu und wir finden nur das UL-Tag. Da haben wir es. Dies ist der erste Schritt. Der zweite Schritt, den wir tun müssen, ist, dass wir ein LI-Tag erstellen müssen. Wir müssen dann Takes zu diesem LI-Tag hinzufügen, und dann müssen wir zu diesem neuen Element bearbeiten. Wie sollen wir das machen? Nun, erstens haben wir ein Array namens Tiere. Wir müssen irgendwie durch dieses Array schleifen. Wir müssen dann jeden Gegenstand packen, den wir durchschleifen. Fügen Sie das als Takes zum LI-Tag hinzu, und dann fügen wir das der URL hinzu. Ich hoffe, das ergibt Sinn. Lassen Sie mich Ihnen zeigen, wie unser Dreck. Auch hier gibt es viele Möglichkeiten, eine Katze zu häuten, wenn wir die traditionelle for-Schleife verwenden könnten, ich möchte die vier von uns einfach intuitiver für mich verwenden. Wenn du nicht weißt, was das bedeutet. Auch hier können Sie meinen JavaScript-Kurs machen. Du kannst es einfach googeln. Es ist sehr einfach für Schleife. Also ja, alles, was ich tun möchte, ist, dass ich eine for-of-Schleife definieren möchte. Iterator ist jedes Element im Array. Und wir werden das Tier einfach nennen. Wir können es nennen, was wir von welchem Objekt wollen , während wir durch dieses Array namens Tiere Schleife wollten. Also gehen wir hin. Jedes Mal, wenn es durch dieses Array iteriert, wird es uns den Tiernamen in einer Variablen namens Tier zurückwerfen. Das ist alles, was Code bedeutet und alles, was es tut. Bitte lassen Sie sich nicht einschüchtern. Tsunami. Wissen Sie, dass jedes Mal, wenn es durch dieses Array schleift, wir werden diesen Tiernamen in einer Variablen namens Tier cool haben. Das ist cool. Aber was ist der erste Schritt? Der erste Schritt ist, lassen Sie uns unseren Listeneintrag erstellen. Nennen wir es einfach Listenelement. Wie schaffen wir das? Denken Sie daran, wir haben unser Dokument begonnen. Wir greifen auf eine Methode namens create method. Element erstellen, tut mir leid. Und das Element, das wir erschaffen wollen, ist dieser Angriff der Alliierten. Bisher so gut, jetzt würdest du mir zustimmen, dass wir ein Verbündet-Tag erstellt haben, aber es ist leer. Es gibt keinen Geschmack. Und in einer der vorherigen Vorträge haben wir viel, viel früher diskutiert, wie man Text zu einem neu erstellten Element hinzufügen kann. Erinnerst du dich, wie wir das gemacht haben? Lassen Sie uns schreiben, wir greifen auf eine Eigenschaft auf das Element Textinhalt genannt. Wir könnten in HTML verwenden. Für Cross-Site-Scripting-Angriffe ist es jedoch viel sicherer, Inhalte zu verwenden. Also lasst uns das machen. Lassen Sie uns auf unser neu erstelltes Listenelement zugreifen. Wir wollen dann seinen Inhalt ändern, nicht wahr? Und was wollen wir, dass das gleich ist? Was wollen wir das zuweisen? Wo wir wollen, dass es der Name des Tieres ist. Und wie ich bereits erwähnt habe, haben wir diese Variable namens Tier zu jeder Schleifeniteration. Also gehen wir hin. Wir haben buchstäblich jetzt oder manipuliert, nimmt Inhalt. Was ist der letzte Schritt? Der letzte Schritt besteht darin, dies zu unserem DOM hinzuzufügen, oder? Neuling schwebt allein im Raum herum. Wir müssen etwas bearbeiten. Ja, wir definieren das UL-Element als übergeordnetes Element. Wir wollen auf die Schmerzkind-Methode zugreifen, NGS. Wir gingen zu malen, was wir wollen, um dieses Listenelement anzuhängen. Also da haben wir es. Bevor ich speichere, wenn ich zum Browser gehe, können Sie hier sehen, wir haben gerade eine Überschrift namens coole Tiere. Ich gehe hier zurück zum Visual Studio-Code und speichere. Was glaubst du, wird passieren? Nun, ich hoffe, es hat funktioniert. Gehen wir hier zu unserem Browser. Und Boom, die IGA, das ist fantastisch. Wir haben buchstäblich, was wir wollten. Ich hoffe, es ergibt Sinn. Ich hoffe, du hattest Spaß mit dieser Übung. Dies hat wirklich viele der verschiedenen Konzepte, die Sie im Kurs gelernt haben, zusammen gebracht , um etwas wirklich Cooles und Spaß zu schaffen. Während das, bin ich sehr, sehr beeindruckt. 37. Kurs Outro: Sprecher, dass Sie einen Verkäufer haben, oder? Buchstäblich beendete gerade eine massive Klasse. Apropos Manipulation der dominanten Art und Weise, sich mit dem Hinzufügen dynamischer HTML-Elemente zu bewegen. Komm schon, das muss spannend sein, Walden ernsthaft, du hast etwas über Knoten gelernt. Sie haben gelernt, dass wir in der Entwicklungsbranche Knoten als Eltern-, Kind-, Geschwisterbeziehung betrachten . Und wenn man das einmal begreift, es wirklich nicht so schwierig, es ist ziemlich intuitiv, das DOM Walden ernsthaft zu durchqueren, sich auf den Rücken zu klopfen und nicht für selbstverständlich zu halten, wie viel Sie bisher gelernt haben. Aber für mich ist es immer eine Fledermaus, nicht da. Wir sind noch nicht ganz fertig. Denn in den kommenden Klassen, in der Tat, im nächsten Verlust, werden wir jetzt über ein entscheidendes Konzept im DOM sprechen, und das sind Ereignisse. Denn oft will man nicht nur etwas statisch erschaffen. Sie möchten auf bestimmte Ereignisse reagieren, wenn ein Benutzer auf eine Schaltfläche oder eine Vene klickt, möchten Sie etwas tun, wenn Sie einen Bildlauf mit der Maus verwenden, wenn ein Benutzer ein Schlüsselereignis ausführt, nur dann möchten Sie oft etwas tun. Also, mit dem gesagt, lasst uns eine Pause machen, einen Kaffee trinken. Und in der nächsten Vorlesung, Lassen Sie uns anfangen, über Dormi Venen zu sprechen, werden weiß genannt.