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
[Isto é CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
Neste vídeo, vamos dar uma olhada no DOM.

5
00:00:10,000 --> 00:00:14,000
Quando um navegador carrega uma página web, ele precisa ser representado na memória de alguma forma.

6
00:00:14,000 --> 00:00:17,000
O modelo de objeto de documento, ou DOM,

7
00:00:17,000 --> 00:00:20,000
descreve como o navegador representa uma página na memória.

8
00:00:20,000 --> 00:00:24,000
Neste vídeo, vamos dar uma olhada no DOM no contexto de JavaScript,

9
00:00:24,000 --> 00:00:26,000
DOM, mas é um conceito independente de linguagem.

10
00:00:26,000 --> 00:00:30,000
Por exemplo, PHP tem sua própria implementação DOM também.

11
00:00:30,000 --> 00:00:32,000
No entanto, DOM é freqüentemente utilizada por JavaScript

12
00:00:32,000 --> 00:00:36,000
desde JavaScript nos permite alterar o conteúdo de uma página da web em tempo real,

13
00:00:36,000 --> 00:00:39,000
DOM e nos permite acessar partes de uma página web.

14
00:00:39,000 --> 00:00:43,000
Vamos dar uma olhada em um site exemplo.

15
00:00:43,000 --> 00:00:48,000
Ok, agora vamos ver como essa página será representada no DOM.

16
00:00:48,000 --> 00:00:51,000
E toda árvore precisa ter um nó raiz no topo.

17
00:00:51,000 --> 00:00:54,000
Para este documento, o elemento de HTML é o nó raiz

18
00:00:54,000 --> 00:00:56,000
porque é o primeiro elemento que aparece.

19
00:00:56,000 --> 00:01:00,000
Vamos adicionar um nó raiz a nossa árvore.

20
00:01:00,000 --> 00:01:03,000
Vamos dar uma olhada no documento HTML novamente.

21
00:01:03,000 --> 00:01:09,000
Observe que a tag body está aninhada dentro da tag HTML.

22
00:01:09,000 --> 00:01:14,000
Isto significa que o corpo é um elemento filho do elemento HTML.

23
00:01:14,000 --> 00:01:17,000
Podemos representar isso em nossa árvore DOM, fazendo o corpo de uma folha

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

25
00:01:20,000 --> 00:01:22,000
Vamos fazer isso.

26
00:01:22,000 --> 00:01:24,000
Temos corpo debaixo HTML.

27
00:01:24,000 --> 00:01:28,000
Agora podemos ver que o corpo tem dois filhos de seu próprio país,

28
00:01:28,000 --> 00:01:31,000
o elemento h1 eo elemento ul.

29
00:01:31,000 --> 00:01:34,000
Isto significa que pode ligar ambos os elementos

30
00:01:34,000 --> 00:01:36,000
ao elemento do corpo, então vamos fazer isso.

31
00:01:36,000 --> 00:01:40,000
Temos um h1 e ul.

32
00:01:40,000 --> 00:01:43,000
Finalmente, o elemento ul tem mais 3 crianças,

33
00:01:43,000 --> 00:01:50,000
e isso vai completar a nossa árvore DOM, então vamos adicionar li, li, li.

34
00:01:50,000 --> 00:01:56,000
Isso conclui nossa árvore DOM, e é assim que o navegador é armazenar sua página.

35
00:01:56,000 --> 00:02:02,000
Agora vamos dar uma olhada em como podemos percorrer esta árvore usando JavaScript.

36
00:02:02,000 --> 00:02:10,000
Podemos acessar esta árvore usando uma variável JavaScript especial chamado documento.

37
00:02:10,000 --> 00:02:13,000
Uma propriedade deste objeto documento

38
00:02:13,000 --> 00:02:16,000
é a propriedade do corpo, e este objeto representa

39
00:02:16,000 --> 00:02:19,000
o elemento do corpo, no nosso exemplo webpage.

40
00:02:19,000 --> 00:02:23,000
Se quiséssemos obter todos os filhos do elemento corpo,

41
00:02:23,000 --> 00:02:26,000
que se você se lembra é que tag h1 ea tag ul,

42
00:02:26,000 --> 00:02:37,000
podemos dizer document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
E isso vai nos devolver um array contendo tanto o elemento h1

44
00:02:41,000 --> 00:02:46,000
eo elemento ul pois ambos são filhos diretos do corpo.

45
00:02:46,000 --> 00:02:50,000
Se quiséssemos criar uma variável que representa o elemento ul

46
00:02:50,000 --> 00:02:57,000
podemos dizer VRR ul = então esse código aqui,

47
00:02:57,000 --> 00:03:00,000
e agora, porque childNodes é simplesmente uma matriz

48
00:03:00,000 --> 00:03:07,000
podemos índice nele com [1] para obter o segundo elemento desse array.

49
00:03:07,000 --> 00:03:13,000
Com este novo objeto ul podemos acessar várias propriedades do elemento, como seu ID.

50
00:03:13,000 --> 00:03:17,000
Se dissermos ul.id que vai ser igual à lista de string

51
00:03:17,000 --> 00:03:20,000
porque isso é o que temos em nossa página HTML.

52
00:03:20,000 --> 00:03:24,000
Também pode obter a sua tagName, que neste caso será

53
00:03:24,000 --> 00:03:32,000
o tipo de elemento que é, neste caso, um ul.

54
00:03:32,000 --> 00:03:36,000
Também pode obter a sua mãe ou o nó de cima, o que neste caso

55
00:03:36,000 --> 00:03:38,000
vai ser o elemento corpo.

56
00:03:38,000 --> 00:03:43,000
Se dissermos. ParentNode, que vai ser o mesmo que document.body.

57
00:03:43,000 --> 00:03:46,000
Claro, isso ul tem filhos de seu próprio país,

58
00:03:46,000 --> 00:03:50,000
por isso, ainda pode-se dizer. childNodes neste elemento,

59
00:03:50,000 --> 00:03:55,000
e essa matriz já deve ter comprimento 3, porque há 3 itens em nossa lista.

60
00:03:55,000 --> 00:04:02,000
Finalmente, talvez a propriedade mais útil será. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
e este será o real conteúdo da lista, que em nossa página de exemplo

62
00:04:06,000 --> 00:04:08,000
eram essas três marcas li.

63
00:04:08,000 --> 00:04:11,000
Claro que, se temos um grande documento, o acesso a elementos

64
00:04:11,000 --> 00:04:14,000
desta forma vai ser muito complicado, porque

65
00:04:14,000 --> 00:04:17,000
eventualmente vamos ter que dizer coisas como document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
suporte de alguma coisa. childNodes suporte outra coisa,

67
00:04:21,000 --> 00:04:23,000
e ele vai ficar muito pesado.

68
00:04:23,000 --> 00:04:27,000
Em vez disso o que realmente queremos fazer é ser capaz de consultar o documento,

69
00:04:27,000 --> 00:04:30,000
Então, tal como buscamos coisas na internet usando palavras-chave

70
00:04:30,000 --> 00:04:33,000
nós realmente precisamos de alguma forma de buscar esse documento para sucintamente

71
00:04:33,000 --> 00:04:37,000
voltar apenas os elementos que se preocupam sem atravessar

72
00:04:37,000 --> 00:04:39,000
todo o topo da árvore para baixo.

73
00:04:39,000 --> 00:04:42,000
Felizmente, os navegadores modernos nos permitem fazer isso

74
00:04:42,000 --> 00:04:47,000
com uma função especial chamada querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
e esta função recebe um único argumento

76
00:04:49,000 --> 00:04:53,000
que é um seletor CSS, e ele vai voltar para nós

77
00:04:53,000 --> 00:04:56,000
todos os elementos que correspondem a esse seletor.

78
00:04:56,000 --> 00:04:59,000
Isso significa que você não precisa aprender uma nova sintaxe para consultar o DOM.

79
00:04:59,000 --> 00:05:02,000
Em vez disso, você pode aplicar o conhecimento que você já sabe

80
00:05:02,000 --> 00:05:04,000
sobre seletores CSS.

81
00:05:04,000 --> 00:05:07,000
Vamos dar uma olhada em alguns exemplos de consultar o documento.

82
00:05:07,000 --> 00:05:13,000
Se dissermos querySelectorAll e passá-lo esta string # foo

83
00:05:13,000 --> 00:05:18,000
que vai nos devolver o elemento com o ID foo.

84
00:05:18,000 --> 00:05:23,000
Você também pode dizer document.getElementById

85
00:05:23,000 --> 00:05:28,000
e passá-lo a string foo sem essa hashtag.

86
00:05:28,000 --> 00:05:31,000
Você vai receber de volta o mesmo objeto exato.

87
00:05:31,000 --> 00:05:37,000
Se em vez disso, passe a corda. Barra para document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
vamos voltar todos os elementos com a barra de aula.

89
00:05:42,000 --> 00:05:45,000
Podemos também combinar seletores CSS.

90
00:05:45,000 --> 00:05:51,000
Se passar na string # foo img

91
00:05:51,000 --> 00:05:54,000
que vai nos devolver todos os elementos de imagem

92
00:05:54,000 --> 00:05:58,000
que são filhos do elemento com o ID foo.

93
00:05:58,000 --> 00:06:03,000
Como você pode ver, através da combinação de seletores temos algumas capacidades de busca realmente poderosas.

94
00:06:03,000 --> 00:06:06,000
Mas sob o capô, o DOM é realmente apenas uma árvore,

95
00:06:06,000 --> 00:06:10,000
e estes seletores nos permitem abstrata que fora em algum grau

96
00:06:10,000 --> 00:06:14,000
porque nem sempre se preocupam com toda a estrutura da árvore DOM.

97
00:06:14,000 --> 00:06:18,000
Essa foi uma rápida visão geral do DOM, e obrigado por se juntar a nós.

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