[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Dette er CS50.] [CS50.TV]
I denne video vil vi tage et kig på DOM.
Når en browser downloader en webside, skal det være repræsenteret i hukommelsen eller anden måde.
Dokumentet objekt model eller DOM,
beskriver, hvordan browseren repræsenterer en webside i hukommelsen.
I denne video, vil vi tage et kig på DOM i forbindelse med JavaScript
men DOM er et sprog-uafhængig koncept.
For eksempel har PHP sin egen DOM gennemførelse samt.
Men DOM ofte anvendes af JavaScript
da JavaScript giver os mulighed for at ændre indholdet af en webside på flue,
og DOM giver os adgang til dele af en webside.
Lad os tage et kig på et eksempel webside.
Okay, lad os nu se, hvordan denne side vil blive repræsenteret i DOM.
Og hvert træ skal have en rod node på toppen.
For dette dokument er HTML-element roden node
fordi det er det første element, der vises.
Lad os tilføje en rod node til vores træ.
Lad os tage et kig på HTML-dokumentet igen.
Bemærk, at body-tagget er indlejret inde i HTML-tag.
Det betyder, at kroppen element er et barn af HTML-element.
Vi kan repræsentere dette i vores DOM-træet ved at gøre kroppen et blad
faldende fra HTML.
Lad os gøre det.
Vi har krop under HTML.
Nu kan vi se, at kroppen har 2 børn på sin egen,
h1 element og det ul element.
Det betyder, at vi kan forbinde begge disse elementer
til kroppen element, så lad os gøre det.
Vi har en h1 og et ul.
Endelig ul element har 3 børn,
og dette vil udfylde vores DOM-træet, så lad os tilføje li, li, li.
Dette afslutter vores DOM-træet, og det er sådan browseren gemmer din webside.
Lad os nu tage et kig på, hvordan vi kan krydse dette træ ved hjælp af JavaScript.
Vi kan få adgang til dette træ ved hjælp af en speciel JavaScript variabel kaldet dokument.
Én egenskab af dette dokument objekt
er kroppen ejendom, og dette formål er
kroppen element i vores eksempel webside.
Hvis vi ønskede at få alle børn i kroppen element
som, hvis du kan huske, er, at h1 tag og ul tag,
kan vi sige document.body.childNodes.
Og det vil give os tilbage et array indeholdende både h1 element
og ul element, da de er både direkte børn af kroppen.
Hvis vi ønskede at oprette en variabel, der repræsenterer ul element
vi kan sige VRR ul = så denne kode heroppe,
og nu, fordi childNodes er simpelthen et array
Vi kan indeksere ind i det med [1] for at få det andet element i denne array.
Med denne nye ul objekt, vi kan få adgang til forskellige egenskaber for elementet ligesom sine id.
Hvis vi siger ul.id der kommer til at være lig med strengen listen
fordi det er hvad vi har i vores HTML-side.
Vi kan også få sin tagname, som i dette tilfælde vil være
hvilken type element er det, i dette tilfælde en ul.
Vi kan også få dets moderselskab eller knuden over det, som i dette tilfælde
kommer til at være det organ element.
Hvis vi siger. ParentNode, der kommer til at være den samme som document.body.
Selvfølgelig har denne ul børn af sine egne,
så vi stadig kan sige. childNodes om dette element,
og dette array skulle nu have længde 3, fordi der er 3 på vores liste.
Endelig, måske den mest nyttige ejendom vil være. InnerHTML,
og dette vil være det faktiske indhold af den liste, som i vores eksempel side
var de 3 li tags.
Selvfølgelig, hvis vi har et stort dokument, adgang elementer
på denne måde kommer til at være virkelig besværligt, fordi
sidst vi bliver nødt til at sige ting som document.body.childNodes
beslag noget. childNodes beslag noget andet,
og det kommer til at blive rigtig besværlig.
I stedet, hvad vi virkelig ønsker at gøre, er at være i stand til at søge i dokumentet,
så ligesom vi efter ting på internettet ved hjælp af søgeord
vi virkelig har brug for nogle måde at søge dette dokument kortfattet
komme tilbage kun elementer, vi holder af, uden gennemkører
hele træet top til bund.
Heldigvis moderne browsere tillader os at gøre dette
med en speciel funktion kaldet querySelectorAll,
og denne funktion tager et enkelt argument
der er en CSS selector, og det kommer til at vende tilbage til os
alle de elementer, der svarer til, at vælgeren.
Det betyder at du ikke behøver at lære en helt ny syntaks til at forespørge DOM.
I stedet kan du anvende den viden, du allerede kender
om CSS selektorer.
Lad os tage et kig på nogle eksempler på forespørge dokumentet.
Hvis vi siger querySelectorAll og videregive det denne streng # foo
der kommer til at give os tilbage elementet med ID foo.
Du kan også sige document.getElementById
og videregive det strengen foo uden denne hashtag.
Du kommer til at komme tilbage den samme nøjagtige objekt.
Hvis vi i stedet passerer strengen. Bar for at document.querySelectorAll
vi vil komme tilbage alle de elementer med klassen baren.
Vi kan også kombinere CSS selektorer.
Hvis vi passerer i strengen # foo img
der kommer til at give os tilbage alle de billedelementer
der er børn af elementet med ID foo.
Som du kan se, ved at kombinere selektorer har vi nogle virkelig effektive søgefunktioner.
Men under motorhjelmen, er DOM egentlig bare et træ,
, og disse vælgere tillade os at abstract det væk til en vis grad
fordi vi ikke altid bekymre sig om hele strukturen i DOM-træet.
Det var en hurtig overblik over DOM, og tak for at tilslutte os.
[CS50.TV]