[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [Questa è CS50.] [CS50.TV] In questo video andremo a dare un'occhiata al DOM. Quando un browser scarica una pagina web, ha bisogno di essere rappresentato in memoria in qualche modo. Il modello di oggetti documento o DOM, descrive come il browser rappresenta una pagina web in memoria. In questo video, daremo uno sguardo al DOM nel contesto di JavaScript, ma DOM è un concetto indipendente dal linguaggio. Ad esempio, PHP ha la sua implementazione DOM pure. Tuttavia, DOM è spesso utilizzato da JavaScript poiché JavaScript ci permette di cambiare il contenuto di una pagina web al volo, DOM e ci permette di accedere parti di una pagina web. Diamo un'occhiata a una pagina web esempio. Ok, ora vediamo come questa pagina sarà rappresentato nel DOM. E ogni albero ha bisogno di avere un nodo radice in alto. Per questo documento, l'elemento HTML è il nodo principale perché è il primo elemento che appare. Proviamo ad aggiungere un nodo principale per il nostro albero. Diamo uno sguardo al documento HTML di nuovo. Si noti che il tag body è nidificato all'interno del tag HTML. Ciò significa che l'elemento del corpo è un elemento figlio dell'elemento HTML. Possiamo rappresentare questo nella nostra struttura DOM facendo corpo una foglia discendente da HTML. Facciamolo. Abbiamo corpo sottostante HTML. Ora possiamo vedere che il corpo ha 2 figli propri, l'elemento h1 e l'elemento ul. Questo significa che siamo in grado di collegare entrambi questi elementi per l'elemento del corpo, quindi cerchiamo di farlo. Abbiamo un h1 e ul. Infine, l'elemento ul ha 3 figli, e questo completerà il nostro albero DOM, quindi cerchiamo di aggiungere li, li, li. Questo completa il nostro albero DOM, e questo è come il browser memorizza la vostra pagina web. Ora diamo uno sguardo a come si può attraversare questo albero utilizzando JavaScript. Siamo in grado di accedere a questo albero utilizzando una speciale variabile JavaScript denominata documento. Una proprietà di questo oggetto documento è la proprietà del corpo, e questo oggetto rappresenta l'elemento del corpo nella nostra pagina web esempio. Se volessimo ottenere tutti i figli dell'elemento corpo, che se vi ricordate è quel tag h1 e il tag ul, possiamo dire document.body.childNodes. E questo ci darà indietro un array contenente sia l'elemento h1 e l'elemento ul dato che sono entrambi figli diretti del corpo. Se volessimo creare una variabile che rappresenta l'elemento ul possiamo dire VRR ul = allora questo codice qui, e ora a causa childNodes è semplicemente un array siamo in grado di indicizzare in esso con [1] per ottenere il secondo elemento di tale matrice. Con questo nuovo oggetto ul possiamo accedere alle varie proprietà dell'elemento come il suo ID. Se diciamo ul.id che sta per essere uguale alla lista stringa perché è quello che abbiamo nella nostra pagina HTML. Possiamo anche ottenere la sua tagName, che in questo caso sta per essere quale tipo di elemento è, in questo caso, un ul. Possiamo anche ottenere suo genitore o il nodo sopra di esso, che in questo caso sta per essere l'elemento del corpo. Se diciamo. ParentNode, che sta per essere lo stesso document.body. Naturalmente, questo ul ha figli propri, così possiamo ancora dire. childNodes su questo elemento, e questo array dovrebbe avere lunghezza 3 perché ci sono 3 articoli nel nostro elenco. Infine, forse la proprietà più utile sarà. InnerHTML, e questo sarà il contenuto effettivo della lista, che nella nostra pagina di esempio erano quei tre li tags. Naturalmente, se abbiamo un documento di grandi dimensioni, l'accesso a elementi in questo modo sta per essere davvero ingombrante perché alla fine saremo costretti a dire cose come document.body.childNodes Staffa di qualcosa. childNodes staffa qualcos'altro, e sta andando per ottenere davvero ingombrante. Invece ciò che vogliamo veramente fare è essere in grado di interrogare il documento, Cosi 'come abbiamo cercato le cose su internet utilizzando parole chiave Abbiamo davvero bisogno di un modo di cercare questo documento succintamente tornare solo gli elementi che ci interessano senza muovere l'intero albero cima a fondo. Per fortuna, i browser moderni ci permettono di fare questo con una funzione speciale chiamata querySelectorAll, e questa funzione prende un singolo argomento che è un selettore CSS, e che sta per tornare a noi tutti gli elementi che corrispondono a tale selettore. Questo significa che non c'è bisogno di imparare una sintassi del tutto nuovo per l'interrogazione del DOM. Invece è possibile applicare le conoscenze che già conosci circa selettori CSS. Diamo un'occhiata ad alcuni esempi di query del documento. Se diciamo querySelectorAll e passiamo questa stringa # foo che sta per restituirci l'elemento con l'ID foo. Si può anche dire document.getElementById e passare la stringa pippo senza che hashtag. Hai intenzione di tornare lo stesso oggetto. Se invece si passa la stringa. Bar a document.querySelectorAll stiamo andando a recuperare tutti gli elementi con la barra di classe. Possiamo anche combinare selettori CSS. Se passiamo nella stringa # foo img che sta per restituirci tutti gli elementi di immagine che sono figli dell'elemento con l'ID foo. Come si può vedere, da selettori combinando abbiamo alcune funzionalità di ricerca molto potenti. Ma sotto il cofano, il DOM è in realtà solo un albero, e questi selettori permettono di astratto che via ad un certo grado perché non sempre ci preoccupiamo per l'intera struttura dell'albero DOM. E 'stata una rapida panoramica del DOM, e grazie per averci seguito. [CS50.TV]