1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Tommy MacWilliams] [Harvardin yliopisto]

3
00:00:04,000 --> 00:00:07,000
[Tämä on CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Tässä video aiomme katsomaan DOM.

5
00:00:10,000 --> 00:00:14,000
Kun selain lataa verkkosivun, se on edustettuna muistiin jotenkin.

6
00:00:14,000 --> 00:00:17,000
Document Object Model, tai DOM,

7
00:00:17,000 --> 00:00:20,000
kuvataan, miten selaimen edustaa verkkosivun muistiin.

8
00:00:20,000 --> 00:00:24,000
Tässä video, me katsomaan DOM yhteydessä JavaScript,

9
00:00:24,000 --> 00:00:26,000
mutta DOM on kielestä riippumaton käsite.

10
00:00:26,000 --> 00:00:30,000
Esimerkiksi PHP on oma DOM täytäntöönpanoa samoin.

11
00:00:30,000 --> 00:00:32,000
Kuitenkin DOM on usein käytetty JavaScript-

12
00:00:32,000 --> 00:00:36,000
koska JavaScript voimme muuttaa sisältöä verkkosivun lennossa,

13
00:00:36,000 --> 00:00:39,000
ja DOM pystymme käyttämään osia verkkosivun.

14
00:00:39,000 --> 00:00:43,000
Katsotaanpa katsomaan esimerkiksi verkkosivu.

15
00:00:43,000 --> 00:00:48,000
Okei, nyt katsotaanpa miten tämä sivu on edustettuna DOM.

16
00:00:48,000 --> 00:00:51,000
Ja jokainen puu tarvitsee juurisolmu yläreunassa.

17
00:00:51,000 --> 00:00:54,000
Tämän asiakirjan HTML-elementti on juurisolmua

18
00:00:54,000 --> 00:00:56,000
koska se on ensimmäinen osa, joka näkyy.

19
00:00:56,000 --> 00:01:00,000
Katsotaanpa lisätä juurisolmu meidän puu.

20
00:01:00,000 --> 00:01:03,000
Katsotaanpa katsomaan HTML asiakirja uudelleen.

21
00:01:03,000 --> 00:01:09,000
Huomaa, että body on sisäkkäin HTML-tunnisteen.

22
00:01:09,000 --> 00:01:14,000
Tämä tarkoittaa sitä, että kehon osa on lapsi HTML-elementti.

23
00:01:14,000 --> 00:01:17,000
Voimme edustaa tätä meidän DOM puuhun elin lehtiä

24
00:01:17,000 --> 00:01:20,000
laskeutuvan HTML.

25
00:01:20,000 --> 00:01:22,000
Tehdään se.

26
00:01:22,000 --> 00:01:24,000
Meillä on kehon alla HTML.

27
00:01:24,000 --> 00:01:28,000
Nyt voimme nähdä, että runko on 2 lasta omaa,

28
00:01:28,000 --> 00:01:31,000
h1 elementti ja ul elementti.

29
00:01:31,000 --> 00:01:34,000
Tämä tarkoittaa, että voimme yhdistää nämä molemmat elementit

30
00:01:34,000 --> 00:01:36,000
kehon osa, joten tehkäämme se.

31
00:01:36,000 --> 00:01:40,000
Meillä on H1 ja ul.

32
00:01:40,000 --> 00:01:43,000
Lopuksi, ul elementti on 3 enemmän lapsia,

33
00:01:43,000 --> 00:01:50,000
ja tämä täydentää meidän DOM puu, joten katsotaanpa lisätä li, li, li.

34
00:01:50,000 --> 00:01:56,000
Tämä täydentää meidän DOM puu, ja näin selain tallentaa verkkosivun.

35
00:01:56,000 --> 00:02:02,000
Nyt katsomaan miten voimme kulkea tämän puun JavaScriptin avulla.

36
00:02:02,000 --> 00:02:10,000
Voimme käyttää tätä puuta käyttämällä erityistä JavaScript muuttuja nimeltä asiakirja.

37
00:02:10,000 --> 00:02:13,000
Yksi ominaisuus tämän asiakirjan esine

38
00:02:13,000 --> 00:02:16,000
on kehon omaisuutta, ja tämä objekti edustaa

39
00:02:16,000 --> 00:02:19,000
runkoelementti esimerkissä kotisivulta.

40
00:02:19,000 --> 00:02:23,000
Jos halusimme saada kaikki lapset runkoelementtiä,

41
00:02:23,000 --> 00:02:26,000
joka, jos muistaa, että H1 tag ja ul tag,

42
00:02:26,000 --> 00:02:37,000
voimme sanoa document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Ja tämä antaa meille takaisin joukko, joka sisältää sekä h1 elementti

44
00:02:41,000 --> 00:02:46,000
ja ul elementti, koska he molemmat suoraan lasten elimistöön.

45
00:02:46,000 --> 00:02:50,000
Jos halusimme luoda muuttuja edustaa ul elementti

46
00:02:50,000 --> 00:02:57,000
voimme sanoa VRR ul = niin tämä koodi tänne,

47
00:02:57,000 --> 00:03:00,000
ja nyt, koska childNodes on yksinkertaisesti joukko

48
00:03:00,000 --> 00:03:07,000
voimme indeksinä se [1] saada toinen elementti, joka array.

49
00:03:07,000 --> 00:03:13,000
Tämän uuden ul esine voimme käyttää erilaisia ​​ominaisuuksia elementin kuten sen tunnus.

50
00:03:13,000 --> 00:03:17,000
Jos sanomme ul.id että tulee olemaan sama merkkijono lista

51
00:03:17,000 --> 00:03:20,000
koska se mitä meillä on HTML-sivu.

52
00:03:20,000 --> 00:03:24,000
Voimme myös saada sen tagname, joka tässä tapauksessa tulee olemaan

53
00:03:24,000 --> 00:03:32,000
minkälainen elementti on, tässä tapauksessa, ul.

54
00:03:32,000 --> 00:03:36,000
Voimme myös saada sen vanhemman tai solmun yläpuolella, joka tässä tapauksessa

55
00:03:36,000 --> 00:03:38,000
tulee olemaan kehon osa.

56
00:03:38,000 --> 00:03:43,000
Jos sanomme. ParentNode, että tulee olemaan sama kuin document.body.

57
00:03:43,000 --> 00:03:46,000
Tietenkin tämä ul on lasten omaa,

58
00:03:46,000 --> 00:03:50,000
joten voimme vielä sanoa. childNodes tästä elementti,

59
00:03:50,000 --> 00:03:55,000
ja tämä joukko pitäisi nyt olla pituus 3 koska on 3 tuotetta listallamme.

60
00:03:55,000 --> 00:04:02,000
Lopuksi, ehkä hyödyllisin ominaisuus tulee olemaan. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
ja tämä on todellinen listan sisällön, joka meidän esimerkki sivu

62
00:04:06,000 --> 00:04:08,000
olivat 3 li tageja.

63
00:04:08,000 --> 00:04:11,000
Tietenkin, jos meillä on suuri asiakirja, saatavuuden elementtejä

64
00:04:11,000 --> 00:04:14,000
Tällä tavalla tulee olemaan todella hankalaa, koska

65
00:04:14,000 --> 00:04:17,000
lopulta meidän täytyy sanoa asioita, kuten document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
kiinnike jotain. childNodes kiinnike jotain muuta,

67
00:04:21,000 --> 00:04:23,000
ja se tulee saada todella hankalaa.

68
00:04:23,000 --> 00:04:27,000
Sen sijaan mitä todella haluamme tehdä, on voitava kyselyn asiakirjan,

69
00:04:27,000 --> 00:04:30,000
joten aivan kuten me etsitään asioita internetissä avainsanojen avulla

70
00:04:30,000 --> 00:04:33,000
me todella tarvitsemme tapa hakea tämän asiakirjan ytimekkäästi

71
00:04:33,000 --> 00:04:37,000
saada takaisin vain osa välitämme kulkematta

72
00:04:37,000 --> 00:04:39,000
koko puu ylhäältä alas.

73
00:04:39,000 --> 00:04:42,000
Onneksi uudet selaimet avulla voimme tehdä tämän

74
00:04:42,000 --> 00:04:47,000
erityinen toiminto nimeltään querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
ja tämä toiminto kestää yhden argumentin

76
00:04:49,000 --> 00:04:53,000
että on CSS valitsin, ja se tulee palauttaa meille

77
00:04:53,000 --> 00:04:56,000
kaikki elementit, jotka vastaavat, että valitsin.

78
00:04:56,000 --> 00:04:59,000
Tämä tarkoittaa sitä, sinun ei tarvitse opetella kokonaan uusi syntaksin istä DOM.

79
00:04:59,000 --> 00:05:02,000
Sen sijaan voit hakea tietoa tiedät jo

80
00:05:02,000 --> 00:05:04,000
noin CSS valitsimet.

81
00:05:04,000 --> 00:05:07,000
Otetaan katsomaan joitakin esimerkkejä istä asiakirjan.

82
00:05:07,000 --> 00:05:13,000
Jos sanomme querySelectorAll ja siirtää se tämän string # foo

83
00:05:13,000 --> 00:05:18,000
joka aikoo antaa meille takaisin elementti tunnus foo.

84
00:05:18,000 --> 00:05:23,000
Voit myös sanoa document.getElementById

85
00:05:23,000 --> 00:05:28,000
ja siirtää se merkkijono foo ilman että hashtag.

86
00:05:28,000 --> 00:05:31,000
Olet menossa saada takaisin täsmälleen sama kohde.

87
00:05:31,000 --> 00:05:37,000
Jos sen sijaan ohitamme merkkijono. Baarista document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
aiomme saada takaisin kaikki elementit luokan baari.

89
00:05:42,000 --> 00:05:45,000
Voimme myös yhdistää CSS valitsimet.

90
00:05:45,000 --> 00:05:51,000
Jos me kulkea string # foo img

91
00:05:51,000 --> 00:05:54,000
joka aikoo antaa meille takaisin kaikki imagotekijöiden

92
00:05:54,000 --> 00:05:58,000
jotka ovat lapsia elementin ID foo.

93
00:05:58,000 --> 00:06:03,000
Kuten näette, yhdistämällä valitsimet meillä on joitakin todella tehokasta hakua.

94
00:06:03,000 --> 00:06:06,000
Mutta konepellin alle, DOM on oikeastaan ​​vain puu,

95
00:06:06,000 --> 00:06:10,000
ja näitä valitsimia avulla voimme abstrakteja että pois jossain määrin

96
00:06:10,000 --> 00:06:14,000
koska emme aina välitä koko rakenne DOM puun.

97
00:06:14,000 --> 00:06:18,000
Se oli nopeasti yleiskuvan DOM, ja kiitos liityit.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]