[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Universitat de Harvard]
[Aquest és CS50.] [CS50.TV]
En aquest vídeo anem a fer una ullada a la DOM.
Quan un navegador descarrega una pàgina web, necessita ser representat en la memòria d'alguna manera.
El model d'objecte de document, o DOM,
descriu com el navegador representa una pàgina web en la memòria.
En aquest vídeo, anem a fer una ullada a la DOM en el context de JavaScript,
però DOM és un concepte independent del llenguatge.
Per exemple, PHP té la seva pròpia implementació DOM també.
No obstant això, DOM s'utilitza amb freqüència per JavaScript
des de JavaScript ens permet canviar el contingut d'una pàgina web sobre la marxa,
DOM i ens permet accedir a parts d'una pàgina web.
Anem a fer una ullada a la pàgina web d'exemple.
Bé, ara veurem com aquesta pàgina estarà representat en el DOM.
I cada arbre ha de tenir un node arrel en la part superior.
En aquest document, l'element HTML és el node arrel
perquè és el primer element que apareix.
Anem a afegir un node arrel del nostre arbre.
Anem a fer una ullada al document HTML nou.
Observeu que l'etiqueta del cos llisca per l'interior de l'etiqueta HTML.
Això vol dir que el cos és un element secundari de l'element HTML.
Podem representar això en el nostre arbre DOM en fer el cos d'un full
descendent d'HTML.
Farem això.
Tenim cos sota HTML.
Ara podem veure que el cos té 2 fills de la seva pròpia,
l'element h1 i l'element ul.
Això significa que podem connectar aquests dos elements
per l'element del cos, per la qual cosa farem això.
Tenim un h1 i ul.
Finalment, l'element ul té 3 fills més,
i això completarà nostre arbre DOM, així que anem a afegir li, li, li.
Això completa el nostre arbre DOM, i és així com el navegador és l'emmagatzematge de la seva pàgina web.
Ara donem una ullada a com podem recórrer aquest arbre amb JavaScript.
Podem accedir a aquest arbre utilitzant una variable especial anomenada JavaScript document.
Una de les propietats d'aquest objecte document
és propietat del cos, i aquest objecte representa
l'element del cos en el nostre exemple pàgina web.
Si volguéssim obtenir tots els elements secundaris de l'element del cos,
que si recorda és que l'etiqueta h1 i l'etiqueta ul,
podem dir document.body.childNodes.
I això ens va a tornar una matriu que conté tant l'element h1
i l'element ul ja que tots dos són fills directes del cos.
Si volem crear una variable que representa l'element ul
podem dir VRR ul = llavors el codi aquí dalt,
i ara ja childNodes és simplement un conjunt
que pot indexar-hi amb [1] per obtenir el segon element d'aquesta matriu.
Amb aquest nou objecte ul podem accedir a diverses propietats de l'element com el seu ID.
Si diem ul.id que serà igual a la llista de cadenes
perquè això és el que tenim a la nostra pàgina HTML.
També podem obtenir la seva tagName, que en aquest cas serà
quin tipus d'element que és, en aquest cas, un ul.
També podem obtenir el seu pare o el node per sobre d'ella, que en aquest cas
serà l'element del cos.
Si diem. ParentNode, que serà el mateix que document.body.
Per descomptat, aquesta ul té fills de la seva pròpia,
pel que encara es pot dir. childNodes en aquest element,
i aquest conjunt ara ha de tenir la longitud 3, perquè hi ha 3 elements de la llista.
Finalment, potser la característica més útil serà. InnerHTML,
i aquest serà el contingut real de la llista, que en la nostra pàgina d'exemple
eren eixos 3 etiquetes li.
Per descomptat, si tenim un document de gran grandària, l'accés als elements
d'aquesta manera serà molt complicat perquè
finalment anem a haver de dir coses com document.body.childNodes
Suport d'alguna cosa. ChildNodes suport una mica més,
i que serà realment complicat.
En canvi, el que realment volem fer és ser capaç de consultar el document,
Així que igual busquem coses a Internet amb les paraules clau
Realment necessitem alguna manera de buscar aquest document succint
tornar només els elements que ens interessen sense travessar
tota la part superior de l'arbre cap avall.
Per sort, els navegadors moderns ens permeten fer aquest
amb una cosa anomenada querySelectorAll,
i aquesta funció pren un sol argument
que és un selector CSS, i va a tornar amb nosaltres
tots els elements que responen a aquest selector.
Això vol dir que vostè no ha d'aprendre una sintaxi completament nou per a la consulta de la DOM.
En el seu lloc es pot aplicar el coneixement que vostè ja sap
sobre selectors CSS.
Fem una ullada a alguns exemples de consulta del document.
Si diem querySelectorAll i passem aquest string # foo
que ens va a tornar l'element amb l'ID foo.
També es pot dir document.getElementById
i passar la cadena foo sense aquest hashtag.
Esteu tornar exactament el mateix objecte.
Si per contra es passa la cadena. Bar de document.querySelectorAll
anem a tornar tots els elements amb la barra de classe.
També podem combinar selectors CSS.
Si passem de la cadena # foo img
que ens va a retornar tots els elements d'imatge
que són fills de l'element amb l'identificador foo.
Com es pot veure, pels selectors combinen tenim alguns molt potents capacitats de cerca.
Però sota el capó, el DOM és realment només un arbre,
i aquests selectors permeten abstracta que fos fins a cert punt
perquè no sempre ens preocupem per tota l'estructura de l'arbre DOM.
Aquesta va ser una visió ràpida de la DOM, i gràcies per acompanyar-nos.
[CS50.TV]