[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Isto é CS50.] [CS50.TV]
Neste vídeo, vamos dar uma olhada no DOM.
Quando um navegador carrega uma página web, ele precisa ser representado na memória de alguma forma.
O modelo de objeto de documento, ou DOM,
descreve como o navegador representa uma página na memória.
Neste vídeo, vamos dar uma olhada no DOM no contexto de JavaScript,
DOM, mas é um conceito independente de linguagem.
Por exemplo, PHP tem sua própria implementação DOM também.
No entanto, DOM é freqüentemente utilizada por JavaScript
desde JavaScript nos permite alterar o conteúdo de uma página da web em tempo real,
DOM e nos permite acessar partes de uma página web.
Vamos dar uma olhada em um site exemplo.
Ok, agora vamos ver como essa página será representada no DOM.
E toda árvore precisa ter um nó raiz no topo.
Para este documento, o elemento de HTML é o nó raiz
porque é o primeiro elemento que aparece.
Vamos adicionar um nó raiz a nossa árvore.
Vamos dar uma olhada no documento HTML novamente.
Observe que a tag body está aninhada dentro da tag HTML.
Isto significa que o corpo é um elemento filho do elemento HTML.
Podemos representar isso em nossa árvore DOM, fazendo o corpo de uma folha
descendente de HTML.
Vamos fazer isso.
Temos corpo debaixo HTML.
Agora podemos ver que o corpo tem dois filhos de seu próprio país,
o elemento h1 eo elemento ul.
Isto significa que pode ligar ambos os elementos
ao elemento do corpo, então vamos fazer isso.
Temos um h1 e ul.
Finalmente, o elemento ul tem mais 3 crianças,
e isso vai completar a nossa árvore DOM, então vamos adicionar li, li, li.
Isso conclui nossa árvore DOM, e é assim que o navegador é armazenar sua página.
Agora vamos dar uma olhada em como podemos percorrer esta árvore usando JavaScript.
Podemos acessar esta árvore usando uma variável JavaScript especial chamado documento.
Uma propriedade deste objeto documento
é a propriedade do corpo, e este objeto representa
o elemento do corpo, no nosso exemplo webpage.
Se quiséssemos obter todos os filhos do elemento corpo,
que se você se lembra é que tag h1 ea tag ul,
podemos dizer document.body.childNodes.
E isso vai nos devolver um array contendo tanto o elemento h1
eo elemento ul pois ambos são filhos diretos do corpo.
Se quiséssemos criar uma variável que representa o elemento ul
podemos dizer VRR ul = então esse código aqui,
e agora, porque childNodes é simplesmente uma matriz
podemos índice nele com [1] para obter o segundo elemento desse array.
Com este novo objeto ul podemos acessar várias propriedades do elemento, como seu ID.
Se dissermos ul.id que vai ser igual à lista de string
porque isso é o que temos em nossa página HTML.
Também pode obter a sua tagName, que neste caso será
o tipo de elemento que é, neste caso, um ul.
Também pode obter a sua mãe ou o nó de cima, o que neste caso
vai ser o elemento corpo.
Se dissermos. ParentNode, que vai ser o mesmo que document.body.
Claro, isso ul tem filhos de seu próprio país,
por isso, ainda pode-se dizer. childNodes neste elemento,
e essa matriz já deve ter comprimento 3, porque há 3 itens em nossa lista.
Finalmente, talvez a propriedade mais útil será. InnerHTML,
e este será o real conteúdo da lista, que em nossa página de exemplo
eram essas três marcas li.
Claro que, se temos um grande documento, o acesso a elementos
desta forma vai ser muito complicado, porque
eventualmente vamos ter que dizer coisas como document.body.childNodes
suporte de alguma coisa. childNodes suporte outra coisa,
e ele vai ficar muito pesado.
Em vez disso o que realmente queremos fazer é ser capaz de consultar o documento,
Então, tal como buscamos coisas na internet usando palavras-chave
nós realmente precisamos de alguma forma de buscar esse documento para sucintamente
voltar apenas os elementos que se preocupam sem atravessar
todo o topo da árvore para baixo.
Felizmente, os navegadores modernos nos permitem fazer isso
com uma função especial chamada querySelectorAll,
e esta função recebe um único argumento
que é um seletor CSS, e ele vai voltar para nós
todos os elementos que correspondem a esse seletor.
Isso significa que você não precisa aprender uma nova sintaxe para consultar o DOM.
Em vez disso, você pode aplicar o conhecimento que você já sabe
sobre seletores CSS.
Vamos dar uma olhada em alguns exemplos de consultar o documento.
Se dissermos querySelectorAll e passá-lo esta string # foo
que vai nos devolver o elemento com o ID foo.
Você também pode dizer document.getElementById
e passá-lo a string foo sem essa hashtag.
Você vai receber de volta o mesmo objeto exato.
Se em vez disso, passe a corda. Barra para document.querySelectorAll
vamos voltar todos os elementos com a barra de aula.
Podemos também combinar seletores CSS.
Se passar na string # foo img
que vai nos devolver todos os elementos de imagem
que são filhos do elemento com o ID foo.
Como você pode ver, através da combinação de seletores temos algumas capacidades de busca realmente poderosas.
Mas sob o capô, o DOM é realmente apenas uma árvore,
e estes seletores nos permitem abstrata que fora em algum grau
porque nem sempre se preocupam com toda a estrutura da árvore DOM.
Essa foi uma rápida visão geral do DOM, e obrigado por se juntar a nós.
[CS50.TV]