DOUG LLOYD: In diesem Video, wir wollten zu rufen separaten Aufmerksamkeit auf eine ganz besondere Element JavaScript dass möglicherweise nützlich für Sie wenn Sie beginnen auf Manipulation von Web-Seiten arbeiten und Ändern Sie den Inhalt Ihrer Web-Seite im laufenden Betrieb. Und das ist der Begriff der das Document Object Model. So wie wir in unserem Video gesehen JavaScript, sind Objekte sehr flexibel. Und sie können verschiedene Felder enthalten. Und obwohl wir nicht in eine Menge zu gehen Detail, die Felder oder Eigenschaften, dass wir wahrscheinlich mehr angemessen nennen im Zusammenhang mit einem Gegenstand, auch diese Eigenschaften können auch andere Objekte sein. Und innerhalb dieser Objekte können auch andere Objekte sein. 

Sie haben dieses sehr große Objekt mit vielen anderen Objekten innen von ihm, welche Art von erstellt diese Idee von einem großen Baum. Nun ist das Dokument-Objekt ein ganz besonderes Objekt in JavaScript daß organisiert Ihre gesamte Web- Seite unter dieser Art von Dach eines Objekts. Und so im Inneren des Dokuments Objekt Objekte präsentieren der Kopf und der Körper Ihrer Web-Seite. 

Innerhalb dieser anderen sind Gegenstände, etc., etc., bis Ihre gesamte Web-Seite in dieser großen Aufgabe organisiert. Was ist der Vorteil hier, nicht wahr? Nun, wir wissen, wie man arbeitet mit Objekten in JavaScript. 

Wenn wir also ein Objekt haben, dass bezieht sich auf unsere gesamte Webseite, dass bedeutet, durch den Aufruf der korrekten Methoden, um das Objekt zu manipulieren oder Änderung bestimmter seiner Eigenschaften wir können die Elemente ändern unsere Seite programmatisch mit Hilfe von JavaScript anstatt die Dinge mit, sagen wir, HTML-Code. Also hier ist ein Beispiel für ein sehr einfache Web-Seite, oder? Es hat HTML-Tags, einen Kopf. 

Innenseite gibt es ein Titel, Hallo Welt. Dann habe ich einen Körper. Innenseite, dass, ich habe drei verschiedene Dinge. Ich habe eine h2 Header-Tag, ein Absatz, und einen Link. Dies ist eine sehr einfache Webseite. 

Nun, was könnte das Dokument Objekt für diese aussehen? Nun, es ist ein wenig beängstigend vielleicht auf den ersten. Aber es ist wirklich nur ein großer Baum. Und an der Wurzel davon ist Dokuments. 

Innerhalb des Dokuments ist ein weiterer Objekt für den HTML auf meiner Seite. Und der HTML auf meiner Seite ist alles. Und dann innerhalb des HTML Objekt, ich habe ein Kopfobjekt, der sich auf alles, was es. 

Und im Inneren des dort Ich habe ein Titelobjekt. Und innerhalb gibt, obwohl ich eine andere Objekt das ist nur Hallo Welt. Ich konnte meinen Körper haben vertreten wie diese. 

Im Inneren meines Körpers, ich habe eine h2 Objekt und eine p-Objekt für Absatz und ein ein Objekt für einen Link. Und so ist dieses gesamte Hierarchie kann als ein großer Baum dargestellt werden mit viel kleineren wenig Dinge kommen aus ihm heraus. Jetzt natürlich, wenn wir programmieren wir nicht von Dingen wie einem großen Baum zu denken. Wir wollen, dass tatsächliche, um zu sehen Code-bezogene Dinge. 

Und zum Glück, können wir nutzen Sie unsere Entwickler-Tools um tatsächlich einen Blick auf Dokument-Objekt dieser Website. Und lassen Sie uns tun. Also habe ich ein Browser-Tab geöffnet. 

Und ich habe bis Developer Tools geöffnet. Und in meinem Video auf JavaScript, I erwähnt, dass die Konsole nicht nur irgendwo, wo wir drucken Informationen es ist auch ein Ort, an dem wir können Eingangsinformationen. In diesem Zusammenhang, was Ich werde sagen, Ich möchte zurück zu bekommen die Dokumentobjekte, so kann ich anfangen, um einen Blick auf sie haben. Also, wie kann ich dies tun? Nun, wenn ich will organisieren, es ist wirklich schön, Ich werde sagen, console.dir, D-I-R. Nun, ich benutze console.log nur Druck aus etwas sehr einfach. Aber wenn ich dies zu organisieren hierarchisch wie ein Gegenstand, Ich will es irgendwie strukturiert wie eine Verzeichnisstruktur. 

Deshalb möchte ich Dokument console.dir. Ich werde drücken Sie Enter. Und rechts unterhalb es jetzt, und ich werde hier vergrößern, Ich habe diese Antwortdokument hat mit einem kleinen Pfeil daneben. Nun, wenn ich öffnen Sie diesen Pfeil, es geht um eine Menge Sachen zu sein. 

Aber wir werden eine Menge zu ignorieren von ihm und nur irgendwie Fokus auf der wichtigste Teil, so dass wir können damit beginnen, dieses Dokument zu navigieren. Es gibt eine Menge mehr auf das DOM als nur Elternknoten und untergeordnete Knoten. Es gibt eine Menge von Neben Zeug. 

Also werde ich diese zu öffnen. Und es gibt eine ganze Menge Zeug, das sich öffnet. Aber was mich interessiert ist genau hier, geordneten Knoten. Lassen Sie uns zu öffnen, dass bis. 

Innerhalb von dort sehe ich etwas Vertrautes, HTML. So Inneren unseres Dokuments eine Ebene tiefer, HTML. Ich öffne, dass bis. Was erwarten wir? 

Wenn Sie von unserem Diagramm erinnern, Was sollten wir innerhalb von HTML finden? Welche zwei Knoten sind darunter im Baum? Lass es uns herausfinden. Wir eröffnen HTML. Wir gehen bis auf die untergeordneten Knoten. 

Pop, geöffnet. Es gibt Kopf und Körper. Und wir eröffnen können den Kopf. Gehen Sie zu seiner untergeordneten Knoten. Nun, es gibt den Titel. 

Und wir konnten weitergehen und ewig so. Wir konnten dies mit Körper als auch zu tun. Aber es gibt eine Möglichkeit für uns, zu betrachten das Dokument als ein großes Objekt organisiert. Und wenn wir uns ein großes Objekt, das eine Menge aussieht wie Code, das bedeutet, dass wir beginnen können um diese große Aufgabe mit zu manipulieren Code, um das, was zu ändern unseren Website aussieht und sich anfühlt. 

Also das ist ein ziemlich mächtiges Werkzeug wir zur Verfügung haben jetzt. So, wie wir gerade gesehen haben, die Dokument-Objekt selbst und alle Objekte in der es haben Eigenschaften und Methoden, nur wie jedes andere Objekt, dass wir wurde mit in JavaScript arbeiten. Aber wir können diese Eigenschaften zu nutzen und verwenden Sie diese Methoden, um Art von Drill-Down von der großen Dokument und erhalten tiefer und tiefer und tiefer, feiner Körner Detail, bis wir zu erhalten, um eine ganz bestimmte Stück unserer Web-Seite, die wir ändern wollen. 

Und wenn wir Eigenschaften des Updates Document-Objekt oder rufen Sie diese Methoden, Dinge könnten auf unserer Web-Seite passieren. Und wir übernehmen keine erfrischenden tun müssen zu haben, diese Änderungen wirksam werden. 

Und das ist eine ziemlich coole Fähigkeit, haben, wenn wir es mit Code arbeiten. Also, was sind einige dieser Eigenschaften die Teil eines Belegobjekt sind? Nun, haben Sie wahrscheinlich sah ein einige von ihnen sehr schnell als wir zippen durch den riesigen Dokument Objekt, das wir gerade gesehen, im Web-Browser. 

Aber ein paar dieser Eigenschaften vielleicht Dinge wie Innen HTML sein. Und Sie vielleicht sogar mich erinnern mit diesem in der JavaScript-Video am Ende, wenn ich wurde über die Ereignisse sprechen. Was war diese innere HTML? Nun, es ist genau das, was ist in zwischen den Tags. 

Und so die innere HTML, zum Beispiel der Titel Tag, wenn wir behalten hatte gehen in dass beispielsweise vor einem Augenblick, hätte Hallo Welt. Das war der Titel auf unserer Seite. Weitere Immobilien sind Knotenname, der ist der Name eines HTML Element wie Titel. ID, die die ID Attribut eines HTML-Elements. 

Daran erinnern, dass wir besonders hinweisen können spezifische Elemente unseres HTML mit einem ID-Attribut, das in der Regel ist praktisch im Rahmen des CSS, speziell. Eltern-Knoten, die einen Verweis auf ist was ist gerade über mir in der DOM. Und Kinderknoten, die ein Bezug auf, was da unten unter mir. Und wir eine Menge, dass sah gerade auf der Suche durch. Kind-Knoten, das ist, wie wir uns tiefer und tiefer in den Baum. 

Attribute, das ist nur ein Array der Attribute des HTML-Elements. So ein Beispiel für Attribute könnten sein, wenn Sie ein Image-Tag haben, es hat in der Regel ein Quellattribut, vielleicht eine Höhe und eine Breite Attribut. Und so wäre, dass nur ein Array sein der alle Attribute zugeordnet mit dem HTML-Element. 

Stil ist eine andere, ist Betreiber der CSS Entwerfen eines bestimmten Elements. Und später in diesem Video, werden wir spezifisch Leverage-Stil, ein paar machen Änderungen an unserer Website. Das sind also einige Eigenschaften. 

Und es gibt auch einige Methoden, die wir zu verwenden, um auch schneller vielleicht isolieren Elemente des Document Object. Vielleicht, das vielseitigste dieser als getElementById. So könnte ich so etwas sagen, weil erinnern, es ist eine Methode des Document Objekt, document.getElementById. 

Und innerhalb dieser Klammern geben ein HTML-Element mit einer bestimmten ID Attribut, das ich vorher haben gesetzt, und ich werde sofort Recht auf das Element gehen der gesamten Website. So dass ich nicht haben, um vielleicht zu bohren nach unten durch jede einzelne Schicht. Ich kann diese Methode verwenden, um es zu finden, wie eine Art Wärme suchenden Rakete, Recht? Es geht einfach und findet genau das, was er sucht. 

GetElementsByTagName ist sehr ähnlich im Geiste. Vielleicht würden alle die finden bold-Tags oder alle der p-Tags und geben Sie mir eine Reihe von alles dass ich dann mit zu arbeiten. appendChild fügt etwas eine Ebene tiefer in den Baum. 

So kann ich eine ganz neue hinzufügen, Element eine Stufe tiefer. Oder ich kann ein Element, das es zu entfernen eine Stufe tiefer als auch, wenn ich will etwas von meiner Web-Seite zu löschen. Jetzt eine schnelle Kodierung Note und eine schnelle Kopfschmerzen sparen note, hoffentlich. 

getElementById-- die d Kleinbuchstaben. Ich kann Ihnen nicht sagen, wie oft ich haben gebrauchte getElementById und aktivierten die d gibt. Weil es wirklich häufig. Schreiben wir das Wort ID, ist es in der Regel Kapital I Kapital D. Und mein Code funktioniert einfach nicht. Und ich kann nicht herausfinden, warum. Dies ist ein wirklich, wirklich, wirklich gemeinsame Fehler, dass jeder macht, selbst Experten, die haben tut dies immer. Also einfach bewusst sein, getElementById, daß d Kleinbuchstaben. Und hoffentlich, dass erspart Ihnen mehrere Minuten mindestens der Herzschmerz. 

Was bedeutet all dies sagt uns das? Wir haben diese Methoden. Wir haben diese Eigenschaften. Nun, wenn wir von Dokument, Dokument. was auch immer, können wir jetzt zu einem erhalten Einzelstück unserer Webseite dass wir wollen, mit Hilfe von JavaScript nur durch den Aufruf dieser Methoden und die Nutzung der Eigenschaften daß wir an verschiedenen Standorten. 

Dies kann wortreich zu erhalten, diese document.getElementById, vielleicht haben eine lange Tag-Namen, vielleicht haben Sie mehr Anrufe später zu tun. Dinge können sich ein wenig wortreich. Und als Programmierer, als Sie haben wahrscheinlich in vielen dieser Videos zu sehen, wir nicht wie wortreich Dinge. 

Wir möchten in der Lage, die Dinge schnell zu tun. So würden wir gerne eine weitere prägnanten Weg, um etwas zu sagen. Also diese Art von führt zum Vorstellung von so etwas wie jQuery. Jetzt jQuery ist kein JavaScript. Es ist nicht Teil des JavaScript. 

Es ist eine Bibliothek, die geschrieben wurde, von einigen JavaScript-Programmierer vor etwa 10 Jahren. Und ihr Ziel ist es, das, was ist zu vereinfachen genannte Client-Side-Scripting, die ist im Grunde, was wir gerade waren reden mit DOM-Manipulationen. Und so, wenn ich wollte das ändern Hintergrundfarbe meiner Web-Seite, vielleicht eine spezifische Div. 

Hier bin ich anscheinend immer ElementById colorDiv. Und ich möchte die Hintergrundfarbe gesetzt. Wenn ich mich nur mit reinem JavaScript Verwendung des Document Object Model, das ist eine Menge Zeug, nicht wahr? document.getElementById colorDiv.style.backgroundColor = grün. 

Puh. Das war eine Menge zu sagen. Es gibt eine Menge zu geben, auch. Und so in jQuery, können wir vielleicht sagen, diese ein wenig mehr prägnant. Die Trade-off sein, es ist vielleicht ein wenig etwas kryptischen ganz plötzlich, Recht? 

Mindestens die lange ist ein wenig erklärend, was wir tun. Das Dollarzeichen, Klammern, Apostroph, hasch, colorDiv, nicht wahr? Was bedeutet das? Nun, das ist im Grunde nur document.getElementById colorDiv. 

Aber es ist diese Art Kurzschrift Weg es zu tun mit jQuery. Lassen Sie uns einfach einen Blick jetzt auf ein paar verschiedene Möglichkeiten, damit ich wirklich Mit dieser Document Object Modell, um Stücke von meiner Website zu manipulieren. Insbesondere werden wir auf Manipulation arbeiten die Farbe eines bestimmten Div, colorDiv, auf einer Web-Seite. Werfen wir also einen Blick auf, dass. Gut. So bin ich auf einer Seite. Es test.html, wenn Sie downloaden genannt dies, wenn Sie mit diesem basteln möchten. Und ich habe einen Haufen bekam Tasten auf dieser Seite. Und ich sage einzelnen Funktionen für die Hintergrundfarbe, lila, grün, orange, rot, blau, eine einzige Funktion für die Hintergrundfarbe, Event-Handler für die Hintergrundfarbe und mit jQuery. Was rede ich da wenn ich das tue? Also haben wir die Buttons zu sehen. Lassen Sie uns nun einen Blick auf etwas von dem Source-Code hier. Wir werden mit test.html starten. So einzelnen Funktionen für den Hintergrund Farbe ist, was ich hier eingegeben. Lassen Sie mich ein wenig zu blättern. 

Und Sie werden feststellen, dass ich merke, haben diese Tasten definiert zu sagen, wenn Sie diese Taste angeklickt wird, rufen Sie die Funktion auf lila. Wenn diese Schaltfläche klicken, und nicht, rufen Sie die Funktion auf grün, drehen orange, rot, blau. Sie können sich wahrscheinlich vorstellen, dass diese ist vielleicht nicht das beste Design Sinn, nicht wahr? 

Es wäre schön, wenn ich könnte haben einen allgemeineren Ansatz. Nun, zunächst werden wir einen Blick nehmen auf das, was diese fünf Funktionen document.getElementById colorDiv.style.background = lila, grün, orange, rot, bzw. blau. Also, nicht besonders das beste Design. 

Die nächste Gruppe von Schaltflächen Ich habe ist, die ich geschrieben habe eine einzelne Funktion namens Farbe ändern, die offenbar akzeptiert einen String als Argument. Das ist also ein bisschen besser. Lila, grün, orange, rot, blau ist jetzt ein Argument. Also habe ich eine allgemeine schriftliche Bei JavaScript-Funktion, die wie folgt aussehen könnte. Ich bin vorbei an. Diese Funktion ist die Farbe ändern erwartet ein Argument aufgerufen Farbe. Und ich sage, setzen die Hintergrundfarbe auf Farbe. Also hier steht, was ich hier habe. Also das ist ein bisschen besser. 

Aber ich vielleicht in der Lage zu sein, besser machen als die. Wenn wir nach unten gehen, um einen Blick zu nehmen an der Event-Handler-Situation, jetzt alle diese Anrufe gleich aussehen. Wenn Sie sich für unseren erinnern Diskussion über Event-Handler, Ich kann Informationen darüber, welche der zu bekommen diese Tasten angeklickt wurde und verwendet diesen. 

Und so in event.JavaScript, ich habe schriftlichen Änderungsfarbe Veranstaltung, die findet heraus, welche Schaltfläche geklickt wurde. Das ist das Triggerobjekt Linie. Und dann hier, wird es richtig wortreich. Aber was ich tue, ist, ich bin Einstellen der Hintergrund Farbe triggerObject inner.HTML. Das ist der Text in zwischen den Taste-Tags. 

Und dann habe ich offenbar um es einzurichten in Kleinbuchstaben. Und das ist, wie ich eine ganze konvertieren String in Kleinbuchstaben mit JavaScript dass Verfahren in Kleinbuchstaben. Denn wenn ich eine Farbe, wie ich versuche, hier zu tun, die Farbe muss in Kleinbuchstaben sein. 

Aber die Schaltfläche, die ich hatte, wenn wir noch einen Blick, feststellen, dass der Text gibt es mit einem Kapital P für purple geschrieben. Und dann bei der sehr Boden hier, ich anscheinend versuchen und tun dies mit jQuery als auch. Und in diesem Fall, ich bin nicht wirklich Aufruf einer Funktion überhaupt. Ich habe gerade gesagt, die Klasse, die ich Hilfe für diese Taste ist eine jQ-Taste. Das ist es. 

Wie funktioniert jQuery wissen, was ich tue? Nun, das ist einer der Vorteile dieser Slash Nachteile jQuery. Es kann mir erlauben, Dinge zu tun sehr kurz, aber vielleicht auch nicht als intuitiv. Vielleicht jene anderen drei machen einen etwas mehr spüren, was ich tue. Hier aber, was ist los? 

Offenbar, die Schaffung eine anonyme Funktion dass Belastungen, wenn mein Dokument ist bereit, so document.ready, eine Funktion passieren wird. Grundsätzlich, wenn ein Dokument bereit? Es ist, wenn meine Seite geladen wurde. 

Also, sobald meine Seite geladen wurde, die Folgende Funktion ist immer bereit. Er sagt, wenn ein Objekt vom Typ jQButton, oder wenn Klasse jQButton angeklickt wurde, führen Sie diese Funktion. Also hier ist zwei anonyme Funktionen, eine innerhalb des anderen definiert. 

Also meine gesamten Kontext hier so weit ist meine Seite wenn es lädt es diese Funktion aufruft. Und diese Funktion wartet für eine Schaltfläche angeklickt werden. Und wenn eine Taste angeklickt wird, jQ Button speziell angeklickt wird, es diesen anderen ruft Funktion, die gehen, um den Hintergrund gesetzt Farbe colorDiv zu sein was Text ist in zwischen den Tags. 

Dies ist der Begriff der welche Schaltfläche geklickt wurde. Aber ansonsten ist diese Art von Verhalten ähnlich eines Ereignisses. Es ist nur die genauso wie ich würde dies in jQuery auszudrücken. Auch hier ist es wahrscheinlich eine viel mehr einschüchternd. Es ist nicht so klar, wie so etwas wie event.js, die vielleicht ein bisschen mehr ist verbose, aber ein bisschen weniger einschüchternd. 

Aber wenn wir knallen zurück zu meinem Browser Fenster, wenn ich starten clicking-- gut, das änderte sich bis violett. Dies ist grün mit dem String-Methode. Dies ist Orange mit dem Event-Handler. 

Dies ist rot mit jQuery, nicht wahr? Sie alle verhalten sich genau das gleiche. Sie tun nur, dass es mit verschiedenen Ansätze zur Lösung des Problems. Es gibt noch viel mehr zu jQuery dann sind wir sicher werde über in diesem Video sprechen. Aber wenn Sie mehr erfahren möchten, können Sie finden Sie auf der jQuery Art von Dokumentation und lernen, ein bisschen mehr zu Dieses sehr flexible Bibliothek, die ist für tun Clientseite Scripting, wie, was wir taten um das Aussehen zu manipulieren und fühlen sich von unserer Web-Seite mit dem Document Object Model. Ich bin Doug Lloyd. Dies ist CS50.