[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard Universiteit]
[Hierdie is CS50.] [CS50.TV]
In hierdie video gaan ons 'n blik op die DOM te neem.
Wanneer 'n leser laai 'n webblad, is dit nodig om verteenwoordig te word in die geheue of ander manier.
Die dokument voorwerp model, of DOM,
beskryf hoe die leser verteenwoordig 'n webblad in die geheue.
In hierdie video, sal ons 'n blik op die DOM te neem in die konteks van JavaScript,
maar DOM is 'n taal-onafhanklike konsep.
Byvoorbeeld, PHP het sy eie DOM implementering as well.
Dit is egter dikwels DOM benut word deur JavaScript
sedert JavaScript ons toelaat om die inhoud van 'n webblad te verander op die vlieg,
en DOM ons toelaat om dele van 'n webblad te bekom.
Kom ons neem 'n blik op 'n voorbeeld webblad.
Goed, laat ons nou sien hoe hierdie bladsy sal verteenwoordig word in die DOM.
En al die bome moet 'n wortel node te hê aan die bokant.
Vir hierdie dokument, die HTML element is die wortel node
want dit is die eerste element wat verskyn.
Kom ons voeg 'n wortel node aan ons boom.
Kom ons neem 'n blik op die HTML dokument weer.
Let daarop dat die liggaam tag is nes binnekant van die HTML tag.
Dit beteken dat die liggaam element is 'n kind van die HTML element.
Ons kan verteenwoordig hierdie in ons DOM boom deur die maak van liggaam 'n blaar
neerdaal van HTML.
Kom ons doen dit.
Ons het liggaam onder HTML.
Nou kan ons sien dat die liggaam het 2 kinders van sy eie,
die H1 element en die ul element.
Dit beteken dat ons beide van die elemente kan koppel
na die liggaam element, so laat ons dit doen.
Ons het 'n H1 en 'n ul.
Ten slotte, die ul element het 3 meer kinders,
en dit sal ons DOM boom voltooi, so laat voeg Li, li, Li.
Dit voltooi ons DOM boom, en dit is hoe die leser jou webblad is die stoor.
Nou kom ons neem 'n blik op hoe kan ons hierdie boom met behulp van JavaScript deurkruis.
Ons kan toegang tot die boom met behulp van 'n spesiale JavaScript veranderlike genoem dokument.
Een eienskap van hierdie dokument voorwerp
is die liggaam eiendom, en die voorwerp verteenwoordig
die liggaam element in ons voorbeeld webblad.
As ons wou al die kinders van die liggaam element te kry,
wat as jy onthou, is dat H1 tag en die ul tag,
ons kan sê document.body.childNodes.
En dit sal ons terug 'n skikking met beide die H1 element
en die ul element want hulle is albei direkte kinders van die liggaam.
As ons wou 'n veranderlike wat die ul element te skep
ons kan VRR ul = dan is hierdie kode hier sê,
En nou, omdat childNodes is bloot 'n skikking
Ons kan kruip in dit met [1] die tweede element van die skikking te kry.
Met hierdie nuwe ul voorwerp wat ons kan toegang tot verskeie eienskappe van die element soos sy ID.
As ons sê ul.id wat gaan gelyk wees aan die string lys
want dit is wat ons in ons HTML bladsy.
Ons kan ook die tagName, wat in hierdie geval gaan wees
watter tipe element dit is, in hierdie geval, 'n ul.
Ons kan ook die ouer of die knoop bo dit, wat in hierdie geval
gaan na die liggaam element wees.
As ons sê parentNode. Wat gaan dieselfde wees as document.body.
Van die kursus, hierdie ul het kinders van sy eie,
sodat ons kan nog steeds sê childNodes op hierdie element.,
en hierdie reeks behoort nou 'n lengte van 3 want daar is 3 items in die lys.
Ten slotte, miskien die mees bruikbare eiendom gaan wees innerHTML.
en dit sal die werklike inhoud van die lys, wat in ons voorbeeld bladsy
was daardie 3 li tags.
Natuurlik, as ons 'n groot dokument, toegang tot elemente
op hierdie manier gaan wees regtig lastig, omdat
uiteindelik sal ons dinge soos document.body.childNodes te sê
bracket iets. childNodes bracket iets anders,
en dit gaan om te kry regtig lastig.
Plaas wat ons regtig wil doen, is om in staat wees om die dokument te bevraagteken,
sodat net soos ons gesoek vir die dinge wat op die internet met behulp van sleutelwoorde
ons regtig nodig het 'n manier van soek hierdie dokument saaklik
terug te kry net die elemente wat ons omgee sonder deurkruis
die hele boom bo tot onder.
Gelukkig, moderne blaaiers kan ons dit te doen
met 'n spesiale funksie genoem querySelectorAll,
en hierdie funksie neem 'n enkele argument
dit is 'n CSS selector, en dit gaan om terug te keer na ons
al die elemente wat ooreenstem met wat selector.
Dit beteken dat jy nie nodig het om 'n hele nuwe sintaks om te leer vir die gebruik daarvan die DOM.
In plaas daarvan kan jy die kennis wat jy reeds weet
oor CSS keurders.
Kom ons neem 'n blik op 'n paar voorbeelde van bevraagteken die dokument.
As ons sê querySelectorAll en slaag dit op hierdie string # cat
wat gaan om te gee vir ons terug die element met die ID cat.
Jy kan ook sê document.getElementById
en dit slaag die string cat sonder dat hashtag.
Jy gaan om terug te kry die presies dieselfde voorwerp.
As in plaas ons verby die string. Bar te document.querySelectorAll
ons gaan om terug te kry al die elemente met die klas bar.
Ons kan ook kombineer CSS keurders.
As ons slaag in die string # cat img
wat gaan ons terug te gee van al die beeld elemente
dat die kinders van die element met die ID cat.
Soos jy kan sien, deur die kombinasie van keurders ons het 'n paar baie kragtige soek funksies.
Maar onder die enjinkap, die DOM is regtig net 'n boom,
en die keurders ons toelaat om abstrakte dat die weg tot 'n mate
omdat ons nie altyd nie omgee oor die hele struktuur van die DOM boom.
Dit was 'n vinnige oorsig van die DOM, en dankie vir die saam met ons.
[CS50.TV]