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] [Harvard University]

3
00:00:04,000 --> 00:00:07,000
[To je CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
V tomto videu jdeme se podívat na DOM.

5
00:00:10,000 --> 00:00:14,000
Když prohlížeč stáhne webovou stránku, musí být zastoupen v paměti nějak.

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

7
00:00:17,000 --> 00:00:20,000
popisuje, jak prohlížeč představuje webovou stránku v paměti.

8
00:00:20,000 --> 00:00:24,000
V tomto videu, budeme se podívat na DOM v kontextu JavaScript,

9
00:00:24,000 --> 00:00:26,000
ale DOM je jazykově nezávislý koncept.

10
00:00:26,000 --> 00:00:30,000
Například, PHP má svůj vlastní implementaci DOM stejně.

11
00:00:30,000 --> 00:00:32,000
Nicméně, DOM často využívá JavaScript

12
00:00:32,000 --> 00:00:36,000
protože JavaScript nám umožní změnit obsah webové stránky v reálném čase,

13
00:00:36,000 --> 00:00:39,000
a DOM umožňuje přístup k části webové stránky.

14
00:00:39,000 --> 00:00:43,000
Pojďme se podívat na příklad webové stránky.

15
00:00:43,000 --> 00:00:48,000
Dobře, teď pojďme podívat, jak tato stránka bude zastoupen v DOM.

16
00:00:48,000 --> 00:00:51,000
A každý strom musí mít kořenový uzel v horní části.

17
00:00:51,000 --> 00:00:54,000
V tomto dokumentu, element HTML je kořenový uzel

18
00:00:54,000 --> 00:00:56,000
protože to je první prvek, který se objeví.

19
00:00:56,000 --> 00:01:00,000
Pojďme přidat kořenový uzel našeho stromu.

20
00:01:00,000 --> 00:01:03,000
Pojďme se podívat na HTML dokument znovu.

21
00:01:03,000 --> 00:01:09,000
Všimněte si, že tělo tag je vnořená uvnitř značky HTML.

22
00:01:09,000 --> 00:01:14,000
To znamená, že tělo prvek je podřízeným prvku HTML.

23
00:01:14,000 --> 00:01:17,000
Můžeme reprezentovat to v našem DOM stromu orgánem list

24
00:01:17,000 --> 00:01:20,000
sestupně od HTML.

25
00:01:20,000 --> 00:01:22,000
Pojďme to udělat.

26
00:01:22,000 --> 00:01:24,000
Máme tělo pod HTML.

27
00:01:24,000 --> 00:01:28,000
Nyní vidíme, že tělo má dvě děti vlastní,

28
00:01:28,000 --> 00:01:31,000
h1 element a ul element.

29
00:01:31,000 --> 00:01:34,000
To znamená, že se můžeme spojit oba tyto prvky

30
00:01:34,000 --> 00:01:36,000
do elementu body, tak se pojďme to udělat.

31
00:01:36,000 --> 00:01:40,000
Máme H1 a UL.

32
00:01:40,000 --> 00:01:43,000
Konečně, ul. prvek má tři další děti,

33
00:01:43,000 --> 00:01:50,000
a to bude dokončení našeho DOM stromu, takže dodejme li, li, li.

34
00:01:50,000 --> 00:01:56,000
To doplňuje naši DOM stromu, a to je to, jak je prohlížeč ukládání své webové stránky.

35
00:01:56,000 --> 00:02:02,000
Nyní se pojďme podívat na to, jak můžeme procházet tento strom pomocí JavaScript.

36
00:02:02,000 --> 00:02:10,000
Můžeme přistupovat k tomuto stromu pomocí speciálního JavaScript proměnnou s názvem dokumentu.

37
00:02:10,000 --> 00:02:13,000
Jedna vlastnost tohoto objektu dokumentu

38
00:02:13,000 --> 00:02:16,000
je tělo majetek, a tento objekt představuje

39
00:02:16,000 --> 00:02:19,000
Tělo prvek v našem příkladu webové stránky.

40
00:02:19,000 --> 00:02:23,000
Pokud bychom chtěli získat všechny děti elementu body,

41
00:02:23,000 --> 00:02:26,000
které, pokud si vzpomenete, že h1 tag a tag ul,

42
00:02:26,000 --> 00:02:37,000
můžeme říci document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
A to se nám zpět pole obsahující jak h1 prvek

44
00:02:41,000 --> 00:02:46,000
a ul prvek, protože jsou oba přímé potomky těla.

45
00:02:46,000 --> 00:02:50,000
Pokud bychom chtěli vytvořit proměnnou reprezentující ul. prvek

46
00:02:50,000 --> 00:02:57,000
můžeme říci, ul. VRR = pak tento kód sem,

47
00:02:57,000 --> 00:03:00,000
a teď, protože je prostě childNodes pole

48
00:03:00,000 --> 00:03:07,000
můžeme index do toho s [1], aby se druhý prvek tohoto pole.

49
00:03:07,000 --> 00:03:13,000
S touto novou ul objektu můžeme přístup různé vlastnosti, jako je prvek, jeho ID.

50
00:03:13,000 --> 00:03:17,000
Říkáme-li, ul.id, že se to rovná seznamu řetězců

51
00:03:17,000 --> 00:03:20,000
protože to je to, co máme v HTML stránce.

52
00:03:20,000 --> 00:03:24,000
Můžeme také získat jeho název značky, která je v tomto případě bude

53
00:03:24,000 --> 00:03:32,000
, jaký typ prvku, je v tomto případě, ul..

54
00:03:32,000 --> 00:03:36,000
Můžeme také získat jeho rodiče nebo uzel nad ní, což v tomto případě

55
00:03:36,000 --> 00:03:38,000
bude tělo prvek.

56
00:03:38,000 --> 00:03:43,000
Pokud říkáme. ParentNode, že to bude stejné jako document.body.

57
00:03:43,000 --> 00:03:46,000
Samozřejmě, že to má ul. děti vlastní,

58
00:03:46,000 --> 00:03:50,000
takže můžeme ještě říci. childNodes na tento prvek,

59
00:03:50,000 --> 00:03:55,000
a toto pole měli mít délku 3, protože tam jsou 3 položky v našem seznamu.

60
00:03:55,000 --> 00:04:02,000
Nakonec, možná nejužitečnější vlastnost bude. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
a to bude aktuální obsah seznamu, což je v našem příkladu stránce

62
00:04:06,000 --> 00:04:08,000
byly ty 3 Li tagy.

63
00:04:08,000 --> 00:04:11,000
Samozřejmě, pokud máme velký dokument, přístup k prvkům

64
00:04:11,000 --> 00:04:14,000
tímto způsobem se bude opravdu náročný, protože

65
00:04:14,000 --> 00:04:17,000
nakonec budeme muset říkat věci jako document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
Držák něco. childNodes držák něco jiného,

67
00:04:21,000 --> 00:04:23,000
a to bude opravdu náročný.

68
00:04:23,000 --> 00:04:27,000
Místo toho, to, co opravdu chcete udělat, je být schopen dotaz dokument,

69
00:04:27,000 --> 00:04:30,000
takže stejně jako jsme hledali, co na internetu pomocí klíčových slov

70
00:04:30,000 --> 00:04:33,000
Opravdu potřebujeme nějaký způsob, jak hledat tento dokument stručně

71
00:04:33,000 --> 00:04:37,000
vrátit pouze prvky Staráme se o bez pojezdu

72
00:04:37,000 --> 00:04:39,000
celý strom shora dolů.

73
00:04:39,000 --> 00:04:42,000
Naštěstí moderní prohlížeče umožní nám to

74
00:04:42,000 --> 00:04:47,000
speciální funkce nazývá querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
a tato funkce má jediný argument

76
00:04:49,000 --> 00:04:53,000
to je CSS selektor, a bude to k nám vrátí

77
00:04:53,000 --> 00:04:56,000
všechny prvky, které odpovídají, že volič.

78
00:04:56,000 --> 00:04:59,000
To znamená, že se nemusíte učit celou novou syntaxi pro dotazování DOM.

79
00:04:59,000 --> 00:05:02,000
Místo toho můžete použít znalosti, které už znáte

80
00:05:02,000 --> 00:05:04,000
o selektorů CSS.

81
00:05:04,000 --> 00:05:07,000
Pojďme se podívat na některé příklady dotazování dokument.

82
00:05:07,000 --> 00:05:13,000
Říkáme-li, querySelectorAll a předat tento řetězec foo #

83
00:05:13,000 --> 00:05:18,000
, co se děje, aby nám vrátit prvek s ID foo.

84
00:05:18,000 --> 00:05:23,000
Můžete také říci document.getElementById

85
00:05:23,000 --> 00:05:28,000
a předat řetězec foo bez tohoto hashtag.

86
00:05:28,000 --> 00:05:31,000
Budeš se dostat zpět přesně stejný objekt.

87
00:05:31,000 --> 00:05:37,000
Pokud místo toho jsme se projít řetězce. Pruh document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
budeme dostat zpět všechny prvky s třídní baru.

89
00:05:42,000 --> 00:05:45,000
Můžeme také kombinovat selektorů CSS.

90
00:05:45,000 --> 00:05:51,000
Pomineme-li v řetězci # foo img

91
00:05:51,000 --> 00:05:54,000
, co se děje, aby nám zpět všechny obrazových prvků

92
00:05:54,000 --> 00:05:58,000
že jsou děti prvku s ID foo.

93
00:05:58,000 --> 00:06:03,000
Jak můžete vidět, tím, že kombinuje selektory máme nějaké opravdu mocné vyhledávací schopnosti.

94
00:06:03,000 --> 00:06:06,000
Ale pod kapotou, DOM je opravdu jen strom,

95
00:06:06,000 --> 00:06:10,000
a tato pole umožňují nám abstraktní, která daleko do určité míry

96
00:06:10,000 --> 00:06:14,000
protože ne vždy starat o celé struktuře stromu DOM.

97
00:06:14,000 --> 00:06:18,000
To bylo rychlý přehled o DOM, a díky za námi.

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