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

3
00:00:04,000 --> 00:00:07,000
[Aceasta este CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
În acest film vom arunca o privire la DOM.

5
00:00:10,000 --> 00:00:14,000
Când un browser-ul descarcă o pagină web, acesta trebuie să fie reprezentat în memorie într-un fel.

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

7
00:00:17,000 --> 00:00:20,000
descrie modul în care browser-ul reprezintă o pagină web în memorie.

8
00:00:20,000 --> 00:00:24,000
În acest film, vom arunca o privire la DOM, în contextul JavaScript,

9
00:00:24,000 --> 00:00:26,000
dar DOM este un concept de independenta de limbaj.

10
00:00:26,000 --> 00:00:30,000
De exemplu, PHP are propria implementare DOM, de asemenea.

11
00:00:30,000 --> 00:00:32,000
Cu toate acestea, DOM este frecvent utilizat de activarea JavaScript-

12
00:00:32,000 --> 00:00:36,000
deoarece JavaScript ne permite să modificați conținutul unei pagini web de pe zbor,

13
00:00:36,000 --> 00:00:39,000
și DOM ne permite să acceseze părți ale unei pagini Web.

14
00:00:39,000 --> 00:00:43,000
Să aruncăm o privire la un exemplu pagina de web.

15
00:00:43,000 --> 00:00:48,000
Bine, acum să vedem cum această pagină vor fi reprezentate în DOM.

16
00:00:48,000 --> 00:00:51,000
Și orice pom, trebuie să aibă un nod rădăcină în partea de sus.

17
00:00:51,000 --> 00:00:54,000
Pentru acest document, elementul HTML este nodul rădăcină

18
00:00:54,000 --> 00:00:56,000
pentru că este primul element care apare.

19
00:00:56,000 --> 00:01:00,000
Să adăugăm un nod rădăcină de copac nostru.

20
00:01:00,000 --> 00:01:03,000
Să aruncăm o privire la documentul HTML din nou.

21
00:01:03,000 --> 00:01:09,000
Observați că tag-ul corpului este imbricat în interiorul tag-ul HTML.

22
00:01:09,000 --> 00:01:14,000
Acest lucru înseamnă că elementul corpul este un copil al elementului HTML.

23
00:01:14,000 --> 00:01:17,000
Ne putem reprezenta asta în copacul nostru DOM de a face corpul o frunză

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

25
00:01:20,000 --> 00:01:22,000
Să facem asta.

26
00:01:22,000 --> 00:01:24,000
Avem corp sub HTML.

27
00:01:24,000 --> 00:01:28,000
Acum putem vedea că trupul are 2 copii proprii,

28
00:01:28,000 --> 00:01:31,000
elementul h1 și elementul ul.

29
00:01:31,000 --> 00:01:34,000
Acest lucru înseamnă că ne putem conecta atât de aceste elemente

30
00:01:34,000 --> 00:01:36,000
la elementul body, deci haideți să facem asta.

31
00:01:36,000 --> 00:01:40,000
Avem un H1 și o ul.

32
00:01:40,000 --> 00:01:43,000
În cele din urmă, elementul ul are 3 copii mai multe,

33
00:01:43,000 --> 00:01:50,000
și acest lucru se va finaliza copacul nostru DOM, asa ca hai sa adaugi Li, Li, Li.

34
00:01:50,000 --> 00:01:56,000
Aceasta completează copacul nostru DOM, iar acest lucru este modul în care browser-ul este stocarea pagina de web.

35
00:01:56,000 --> 00:02:02,000
Acum, haideți să aruncăm o privire la modul în care putem traversa acest copac cu ajutorul JavaScript.

36
00:02:02,000 --> 00:02:10,000
Putem accesa acest copac folosind o variabilă special de activarea JavaScript-numit document.

37
00:02:10,000 --> 00:02:13,000
O proprietate a acestui obiect documentului

38
00:02:13,000 --> 00:02:16,000
este proprietatea corp, iar acest obiect reprezintă

39
00:02:16,000 --> 00:02:19,000
elementul corp în exemplul site-ul nostru.

40
00:02:19,000 --> 00:02:23,000
Dacă am vrut pentru a obține toate de copiii de la elementul body,

41
00:02:23,000 --> 00:02:26,000
care, dacă vă amintiți este că tag-ul H1 și tag-ul,

42
00:02:26,000 --> 00:02:37,000
putem spune document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Și acest lucru ne va da înapoi o matrice care conține atât elementul h1

44
00:02:41,000 --> 00:02:46,000
și elementul ul, deoarece acestea sunt ambii copii directe ale corpului.

45
00:02:46,000 --> 00:02:50,000
Dacă am vrut să creeze o variabila care reprezintă elementul ul

46
00:02:50,000 --> 00:02:57,000
putem spune VRR ul =, atunci acest cod aici,

47
00:02:57,000 --> 00:03:00,000
și acum că childNodes este pur și simplu o matrice

48
00:03:00,000 --> 00:03:07,000
putem index în ea cu [1] pentru a obține al doilea element de care matrice.

49
00:03:07,000 --> 00:03:13,000
Cu acest nou obiect ul, putem accesa diferite proprietăți ale elementului, cum ar fi ID-ul său.

50
00:03:13,000 --> 00:03:17,000
Dacă spunem ul.id care va fi egală cu lista de string

51
00:03:17,000 --> 00:03:20,000
pentru că ceea ce avem în pagina noastră de HTML.

52
00:03:20,000 --> 00:03:24,000
Putem obține, de asemenea tagName sale, care în acest caz va fi

53
00:03:24,000 --> 00:03:32,000
ce tip de element de aceasta este, în acest caz, un ul.

54
00:03:32,000 --> 00:03:36,000
Putem obține, de asemenea, părinte sau nodul de mai sus, care, în acest caz,

55
00:03:36,000 --> 00:03:38,000
va fi elementul corp.

56
00:03:38,000 --> 00:03:43,000
Dacă spunem. ParentNode, care va fi la fel ca document.body.

57
00:03:43,000 --> 00:03:46,000
Desigur, acest lucru ul are copii proprii,

58
00:03:46,000 --> 00:03:50,000
astfel încât putem spune încă childNodes pe acest element.,

59
00:03:50,000 --> 00:03:55,000
și această matrice trebuie să aibă acum lungime 3, deoarece exista 3 elemente în lista noastră.

60
00:03:55,000 --> 00:04:02,000
În cele din urmă, probabil proprietatea cea mai utilă va fi. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
și acest lucru va fi conținutul real al listei, care în pagina noastră exemplu

62
00:04:06,000 --> 00:04:08,000
au fost cele 3 tag-uri li.

63
00:04:08,000 --> 00:04:11,000
Desigur, dacă avem un document de mare, accesul la elementele

64
00:04:11,000 --> 00:04:14,000
în acest mod va fi foarte greoaie, deoarece

65
00:04:14,000 --> 00:04:17,000
în cele din urmă va trebui să spun lucruri de genul document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
ceva suport. childNodes ceva suport altceva,

67
00:04:21,000 --> 00:04:23,000
și că va obține într-adevăr greoaie.

68
00:04:23,000 --> 00:04:27,000
În schimb ceea ce vrem cu adevărat să faceți este să fie în măsură pentru a interoga document,

69
00:04:27,000 --> 00:04:30,000
Deci, doar ca am cautat pentru lucruri pe internet folosind cuvinte cheie

70
00:04:30,000 --> 00:04:33,000
avem într-adevăr nevoie de o modalitate de a căuta acest document succint

71
00:04:33,000 --> 00:04:37,000
mă întorc numai elementele pe care le pasă, fără parcurgerea

72
00:04:37,000 --> 00:04:39,000
întreaga sus copac în jos.

73
00:04:39,000 --> 00:04:42,000
Din fericire, browserele moderne ne permit să facem acest lucru

74
00:04:42,000 --> 00:04:47,000
cu o funcție specială numit querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
și această funcție are un singur argument

76
00:04:49,000 --> 00:04:53,000
că este un selector CSS, și se va reveni la noi

77
00:04:53,000 --> 00:04:56,000
toate elementele care se potrivesc cu acel selector.

78
00:04:56,000 --> 00:04:59,000
Asta înseamnă că nu aveți nevoie pentru a învăța o sintaxă cu totul nou pentru interogarea DOM.

79
00:04:59,000 --> 00:05:02,000
În schimb puteți aplica cunoștințele știți deja

80
00:05:02,000 --> 00:05:04,000
despre selectoare CSS.

81
00:05:04,000 --> 00:05:07,000
Să aruncăm o privire la câteva exemple de interogare documentului.

82
00:05:07,000 --> 00:05:13,000
Dacă spunem querySelectorAll și să-l dați acest șir # foo

83
00:05:13,000 --> 00:05:18,000
care ne va da înapoi elementul cu ID-ul foo.

84
00:05:18,000 --> 00:05:23,000
Se poate spune, de asemenea, document.getElementById

85
00:05:23,000 --> 00:05:28,000
și trece-l foo șir fără ca hashtag.

86
00:05:28,000 --> 00:05:31,000
Ai de gând să mă întorc același obiect exact.

87
00:05:31,000 --> 00:05:37,000
Dacă în loc să trecem șirul. Bara de document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
am de gând să mă întorc toate elementele cu bara de clasă.

89
00:05:42,000 --> 00:05:45,000
Putem combina, de asemenea, selectoare CSS.

90
00:05:45,000 --> 00:05:51,000
Dacă trecem în șirul # foo img

91
00:05:51,000 --> 00:05:54,000
care ne va da înapoi toate elementele imaginii

92
00:05:54,000 --> 00:05:58,000
că sunt copii ai elementului cu ID-ul foo.

93
00:05:58,000 --> 00:06:03,000
După cum puteți vedea, prin Combinarea selectorilor avem unele capabilități de căutare foarte puternic.

94
00:06:03,000 --> 00:06:06,000
Dar sub capota, DOM este de fapt doar un copac,

95
00:06:06,000 --> 00:06:10,000
și aceste selectoare ne permit să abstract, care departe de un anumit grad

96
00:06:10,000 --> 00:06:14,000
pentru că nu ne pasă întotdeauna de întreaga structură a arborelui DOM.

97
00:06:14,000 --> 00:06:18,000
Asta a fost o prezentare generală rapidă a DOM, și mulțumesc pentru alături de noi.

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