DOUG LLOYD: In questo video, abbiamo voluto per richiamare l'attenzione separata ad una particolare elemento di JavaScript che si potrebbe trovare a portata di mano quando si sta iniziando lavorare sulla manipolazione pagine web e cambiare il contenuto della tua pagina web al volo. E questo è il concetto di il Document Object Model. Così come abbiamo visto nel nostro video JavaScript, gli oggetti sono molto flessibili. E possono contenere vari campi. E anche se non siamo andati in un sacco di dettaglio, quei campi o proprietà, che ci sarebbe probabilmente più opportunamente li chiamano nel contesto di un oggetto, anche queste proprietà possono essere altri oggetti. E all'interno di tali oggetti può essere altri oggetti. 

Hai questo oggetto molto grande con un sacco di altri oggetti all'interno di esso, che tipo di crea questa idea di un grande albero. Ora, l'oggetto documento è un oggetto molto speciale in JavaScript che organizza l'intero Web pagina sotto questa sorta di ombrello di un oggetto. E così all'interno del documento oggetti sono oggetti che presentano la testa e il corpo della pagina web. 

All'interno di questi sono altri oggetti, eccetera, eccetera, fino a quando l'intera pagina web ha organizzata in questo grande oggetto. Qual è il rialzo qui, giusto? Beh, sappiamo come lavorare con gli oggetti in JavaScript. 

Quindi, se abbiamo un oggetto che si riferisce a tutta la nostra pagina web, che significa chiamando il corretto metodi per manipolare l'oggetto o la modifica di alcuni delle sue proprietà, abbiamo può modificare gli elementi di nostra pagina di programmazione utilizzando JavaScript invece di avere per codificare le cose con, ad esempio, HTML. Quindi, ecco un esempio di un molto semplice pagina web, giusto? E 'ottenuto i tag HTML, una testa. 

All'interno di ci è un titolo, ciao mondo. Poi ho un corpo. All'interno di questo, ho tre cose diverse. Ho un tag di intestazione h2, un paragrafo, e un link. Questo è molto semplice pagina web. 

Ebbene, che cosa potrebbe essere il documento opporsi per questo look, come? Beh, è ​​un po ' pauroso forse in un primo momento. Ma è davvero solo un grande albero. E alla radice di esso è documento. 

All'interno del documento è un'altra oggetto che fa riferimento al codice HTML della mia pagina. E il codice HTML della mia pagina è tutto questo. E poi all'interno del HTML oggetto, ho un oggetto di testa, che si riferisce a tutto quello che c'è. 

E dentro di lì, Ho un oggetto titolo. E dentro di lì, ho un altro oggetto che è appena ciao mondo. Ho potuto avere il mio corpo rappresentata come questo. 

All'interno del mio corpo, ho un h2 oggetto e un oggetto p per punto e un oggetto per un collegamento. E così questo intera gerarchia può essere rappresentato come un grande albero con tanto di piccolo piccolo cose provenienti da esso. Ora, naturalmente, quando stiamo programmando, abbiamo non pensare a cose come un grande albero. Vogliamo vedere reale codice cose relative. 

E per fortuna, possiamo utilizzare i nostri strumenti di sviluppo a prendere in realtà uno sguardo a documento oggetto di questo sito web. E facciamolo. Così ho aperto un tab del browser. 

E ho aperto il Developer Tools. E nel mio video su JavaScript, io detto che la console non è solo un posto dove stampiamo informazioni, è anche un luogo dove possiamo inserire informazioni. In questo contesto, cosa Io vado a dire è Mi piacerebbe tornare gli oggetti documento, così posso iniziare a dare un'occhiata a questo. Quindi, come potrei fare questo? Beh, se voglio organizzarlo davvero bene, Io vado a dire console.dir, D-I-R. Ora, io uso console.log a solo stampa fuori qualcosa di molto semplice. Ma se voglio organizzare questo gerarchicamente come un oggetto, Lo voglio sorta di struttura come una struttura di directory. 

Quindi voglio console.dir documento. Ho intenzione di premere Invio. E proprio sotto di esso ora, e io lo zoom a qui, Ho questo documento di risposta con una piccola freccia accanto. Ora, quando apro questa freccia, ci sara 'un sacco di roba. 

Ma stiamo andando a ignorare un sacco di essa e solo tipo di messa a fuoco sulla parte più importante, quindi abbiamo può cominciare a navigare in questo documento. C'è molto di più per il DOM di nodi e nodi figlio solo genitore. C'è un sacco di roba accessoria. 

Quindi ho intenzione di aprire questo. E ci sono un bel po ' di roba che si apre. Ma tutto quello che interessa è proprio qui, nodi figli. Apriamo che fino. 

All'interno ci vedo qualcosa di familiare, HTML. Così all'interno del nostro documento un livello inferiore, HTML. Apro che fino. Cosa stiamo aspettando? 

Se vi ricordate dal nostro schema, cosa dobbiamo trovare dentro di HTML? Quali sono i due nodi sono sotto di esso nella struttura? Scopriamolo. Apriamo HTML. Scendiamo ai suoi nodi figlio. 

Pop che si aprono. C'è testa e il corpo. E possiamo aprire la testa. Vai ai suoi nodi figlio. Beh, c'è il titolo. 

E potremmo andare avanti all'infinito avanti così per sempre. Potremmo farlo con corpo. Ma c'è un modo per noi di guardare il documento organizzato come un grande oggetto. E se guardiamo è un grande oggetto che assomiglia molto come il codice, il che significa che possiamo iniziare per manipolare questo grande oggetto utilizzando codice per modificare ciò che il nostro sito web guarda e si sente come. 

Ecco, questo è uno strumento molto potente abbiamo a nostra disposizione ora. Quindi, come abbiamo appena visto, il documento oggetto stesso e tutti gli oggetti all'interno di essa hanno proprietà e metodi, appena come qualsiasi altro oggetto che abbiamo lavorato con in JavaScript. Ma possiamo usare tali proprietà e utilizzare gli stessi metodi per tipo di drill-down dal grande documento e ottenere più bassa e più in basso, più fini chicchi di dettaglio, fino a quando non arrivare a un pezzo molto specifico della nostra pagina web che vogliamo cambiare. 

E quando si aggiorna le proprietà del Document Object o chiamare quei metodi, le cose potrebbero accadere nella nostra pagina web. E non abbiamo bisogno di fare qualsiasi rinfrescante di avere quelle modifiche abbiano effetto. 

E questa è una capacità abbastanza freddo per avere quando stiamo lavorando con il codice. Ma quali sono alcune di queste proprietà che fanno parte di un oggetto di documento? Beh, probabilmente visto un paio di loro molto rapidamente come siamo stati zippare attraverso il documento gigante oggetto abbiamo appena visto nel browser web. 

Ma un paio di queste proprietà potrebbe essere cose come HTML interno. E si potrebbe anche me ricordare Utilizzando questo nel video JavaScript alla fine quando stava parlando eventi. Qual era questo HTML interno? Beh, è ​​proprio ciò che è tra i tag. 

E così il codice HTML interno, per esempio, del titolo tag, se avessimo continuato ad andare in che l'esempio di un momento fa, sarebbe stato ciao mondo. Questo era il titolo della nostra pagina. Altre proprietà includere il nome del nodo, che è il nome di un HTML elemento come titolo. ID, che è l'ID attributo di un elemento HTML. 

Ricordiamo che siamo in grado di indicare appositamente elementi specifici della nostra HTML con un attributo ID, che di solito torna utile nel contesto di CSS, specificamente. Nodo padre, che è un riferimento a ciò che è appena sopra di me nel DOM. E nodi figlio, che è un riferimento a ciò che è in basso sotto di me. E abbiamo visto un sacco di che solo guardando attraverso. Nodi figlio, ecco come siamo arrivati più in basso nell'albero. 

Attributi, questo è solo un array di attributi dell'elemento HTML. Così un esempio di attributi potrebbe essere se si dispone di un tag di immagine, di solito ha un attributo di origine, forse un altezza e un attributo width. E perché sarebbe solo essere un array di tutti gli attributi associati con tale elemento HTML. 

Style è un altro che cosa rappresenta il CSS designazione di un particolare elemento. E più tardi in questo video, faremo in particolare stile leva per fare un paio di modifiche al nostro sito web. Quindi, queste sono alcune proprietà. 

E ci sono anche alcuni I metodi che possiamo utilizzare anche più rapidamente forse isolare elementi del Document Object. Forse, il più versatile dei quali è getElementById. Quindi potrei dire qualcosa di simile, perché ricordatevi che è un metodo del Documento Object, document.getElementById. 

E dentro di queste parentesi, specificare un elemento HTML con una particolare ID Attribuisco che ho in precedenza set, e io sarò subito andare a destra a quell'elemento del sito web globale. Quindi io non devo forare forse giù attraverso ogni singolo strato. Posso solo utilizzare questo metodo per trovarlo, come una sorta di ricerca di calore missile, destra? Si va solo e trova esattamente ciò che sta cercando. 

GetElementsByTagName è molto simile nello spirito. Forse avrebbe trovato tutto il tag grassetto o tutti i tag p e mi danno una serie di tutto che ho potuto poi lavorare. appendChild aggiunge qualcosa un livello basso nella struttura. 

Così posso aggiungere un intero nuovo elemento di un livello più basso. O posso rimuovere un elemento che è un livello più basso e se voglio eliminare qualcosa dalla mia pagina web. Ora, una nota di codifica rapida e una rapida risparmio mal di testa nota, si spera. 

getElementById-- il d è minuscolo. Non posso dirvi quante volte ho usato getElementById e capitalizzati d lì. Perché è davvero comune. Se scriviamo l'ID parola, è solitamente maiuscola capitale D. E il mio codice non funziona. E non riesco a capire perché. Questo è davvero, davvero, davvero bug comune che tutti fanno, anche gli esperti che hanno fatto questo per sempre. Quindi, basta essere consapevoli, getElementById, che d è minuscolo. E si spera, che consente di risparmiare diversi minuti almeno di angoscia. 

Che cosa significa tutto questo ci dice? Abbiamo questi metodi. Abbiamo queste proprietà. Ora, se si parte da del documento, documento. qualunque cosa, ora possiamo raggiungere qualsiasi singolo pezzo della nostra pagina web che vogliamo utilizzando JavaScript semplicemente chiamando questi metodi e sfruttando le proprietà che troviamo in varie località. 

Questo può ottenere prolisso, questo document.getElementById, forse hanno una lunga nome di tag, forse si fa più chiamate in seguito. Le cose possono ottenere un po 'prolisso. E come i programmatori, come hai probabilmente visto in molti di questi video, non ci piace cose verboso. 

Ci piace essere in grado di fare le cose in fretta. Così ci piace di più modo conciso per dire qualcosa. Quindi questo tipo di porta alla nozione di una cosa chiamata jQuery. Ora jQuery non è JavaScript. Non è parte di JavaScript. 

È una libreria che è stato scritto da alcuni programmatori JavaScript circa 10 anni fa. E il suo obiettivo è quello di semplificare questo ciò che è chiamato scripting lato client, che è fondamentalmente ciò che siamo stati solo parlando con manipolazioni DOM. E così, se ho voluto modificare il colore della mia sfondo della pagina web, forse una specifica Div. 

Qui, sto a quanto pare sempre ElementById colorDiv. E voglio impostare il colore di sfondo. Se sto usando solo puro JavaScript utilizzando il Document Object Model, che è un sacco di roba, giusto? document.getElementById colorDiv.style.backgroundColor = verde. 

Accidenti. E 'stato molto da dire. E 'molto da scrivere, anche. E così in jQuery, possiamo forse dire questo un po 'più conciso. Il commercio con l'essere è forse un po ' po 'più criptico tutto ad un tratto, destra? 

Almeno lungo è un po 'più esplicative di quello che stiamo facendo. Questo simbolo del dollaro, tra parentesi, apostrofo, hash, colorDiv, giusto? Che cosa significa? Beh, questo è fondamentalmente solo document.getElementById colorDiv. 

Ma è questa sorta di stenografia modo di farlo utilizzando jQuery. Diciamo solo un'occhiata ora in un paio di modi diversi che potrebbe effettivamente utilizzare questa Document Object Modello di manipolare pezzi del mio sito. In particolare, stiamo andando di lavorare sulla manipolazione il colore di un particolare Div, colorDiv, su una pagina web. Quindi, diamo uno sguardo a questo. Tutto ok. Quindi sono in una pagina. Si chiama test.html quando si scarica questo se si vuole sperimentare con questo. E ho un sacco di pulsanti in questa pagina. E sto dicendo singole funzioni per il colore di sfondo, viola, verde, arancio, rosso, blu, una sola funzione per il colore di sfondo, gestore di eventi per il colore di sfondo, e l'utilizzo di jQuery. Che cosa sto parlando quando sto facendo questo? Così abbiamo visto i pulsanti. Ora, diamo uno sguardo a parte del codice sorgente di qui. Inizieremo con test.html. Così funzioni individuali per sfondo il colore è quello che ho scritto qui. Mi permetta di scorrere un po '. 

E si noterà che ho hanno definito questi pulsanti dire quando si fa clic su questo pulsante, chiamare la funzione girare viola. Quando questo pulsante è fare clic su, piuttosto, chiamare la funzione diventa verde, diventa arancione, diventa rosso, diventa blu. Probabilmente si può immaginare che questo Non è forse il miglior design senso, giusto? 

Sarebbe bello se potessi avere un approccio più generale. Beh, prima daremo uno sguardo a ciò che quei cinque funzioni sono document.getElementById colorDiv.style.background = viola, verde, arancio, rosso, e blu, rispettivamente. Quindi, non particolarmente il miglior design. 

La prossima serie di pulsanti Io ho è che ho scritto una singola funzione denominata cambiare il colore che a quanto pare accetta una stringa come argomento. Quindi questo è un po 'meglio. Viola, verde, arancio, rosso, blu è ora un argomento. Così ho scritto un più generale caso funzione JavaScript, che potrebbe essere simile a questa. Sto passando. Questo cambiamento di colore funzione è in attesa di un argomento chiamato colore. E sto dicendo impostare il colore di sfondo al colore. Così qui rappresenta quello che ho qui. Ecco, questo è un po 'meglio. 

Ma potrei essere in grado di fare di meglio. Se scendiamo a dare un'occhiata la situazione gestore di eventi, ora tutte queste chiamate hanno lo stesso aspetto. Se vi ricordate per il nostro discussione sui gestori di eventi, Posso avere informazioni su quali di questi pulsanti è stato cliccato e usare quella. 

E così nel event.JavaScript, ho scritto evento cambiamento di colore, che di capire verso quale pulsante è stato fatto clic. Questa è la linea oggetto di innesco. E poi qui, diventa davvero prolisso. Ma quello che sto facendo è che sono impostare lo sfondo colore di triggerObject inner.HTML. Questo è il testo tra i tag pulsante. 

E poi ho avuto a quanto pare per impostarlo in lettere minuscole. Ed è così che posso convertire un intero stringa in minuscolo in JavaScript utilizzando tale metodo in minuscolo. Perché quando ho creato un colore, come io sto cercando di fare qui, il colore deve essere tutto minuscolo. 

Ma il pulsante che ho avuto, se prendiamo un altro sguardo, notare che il testo non vi è scritto con la P maiuscola per viola. E poi per lo fondo qui, mi pare cercare di fare questo usando jQuery pure. E in questo caso, non sono in realtà chiamare una funzione affatto. Ho appena detto alla classe che sono utilizzando a questo pulsante è un pulsante JQ. Questo è tutto. 

Così come fa jQuery sapere cosa sto facendo? Ebbene, questo è uno dei vantaggi tagliare svantaggi di jQuery. Può mi permette di fare le cose molto conciso, ma forse non come intuitivamente. Forse quelle altre tre fanno una po 'più senso quello che sto facendo. Qui, però, che cosa sta succedendo? 

A quanto pare, la creazione di una funzione anonima che carica ogni volta che il mio documento è pronto, così document.ready, qualche funzione sta per accadere. Fondamentalmente, quando è un documento pronto? E 'quando la mia pagina è stata caricata. 

Quindi, non appena la mia pagina è stata caricata, il seguente funzione è sempre pronto. Si dice, se un oggetto di tipo jQButton, o se la classe jQButton è stato fatto clic, eseguire questa funzione. Quindi, ecco due funzioni anonime, uno definita all'interno dell'altro. 

Così tutta la mia contesto qui finora è la mia pagina quando lo carica chiama questa funzione. E questa funzione è in attesa per un pulsante per essere cliccato. E quando si fa clic su un pulsante, JQ pulsante specifico viene cliccato, chiama questo altro funzione, che sta andando per impostare lo sfondo colore di colorDiv di essere il testo che si trova tra i tag. 

Questa è la nozione di quale pulsante è stato cliccato. Ma per il resto, si tratta di una sorta di comportarsi simile a un evento. E 'solo allo stesso modo ho avrebbe espresso questo in jQuery. Anche in questo caso, è probabilmente una molto più intimidatorio. Non è chiaro come qualcosa come event.js, che è forse un po 'di più verbose, ma un po 'meno intimidatorio. 

Ma se abbiamo pop indietro verso mio browser finestra, se comincio clicking-- bene, che ha cambiato al viola. Questo è verde con il metodo stringa. Questo è di colore arancione con il gestore di eventi. 

Questo è rosso utilizzando jQuery, giusto? Tutti si comportano esattamente lo stesso. Hanno appena lo fanno utilizzando diversi approcci per risolvere il problema. C'è molto di più per jQuery allora siamo sicuramente andando a parlare in questo video. Ma se volete saperne di più, è possibile andare al tipo di documentazione jQuery e imparare un po 'di più questa biblioteca molto flessibile, che è ottimo per fare lato client scripting come quello che stavamo facendo per manipolare l'aspetto e sentire della nostra pagina web con il Document Object Model. Sono Doug Lloyd. Questo è CS50.