Como desenvolvedor da Net iniciante, você ouvirá muitos termos lançados e não tem certeza, o que é importante em seu estudo. Um desses termos que você pode ter ouvido é Dom, que é um conceito importante para os desenvolvedores da internet aprenderem. De fato, pode ser o mais importante.
Mas o que Dom significa?
Dom é um acrônimo que significa Modelo de objeto de documento. É como um navegador da internet representa uma página da internet internamente. O DOM determina qual conteúdo deve estar em uma página e como cada elemento do conteúdo se relaciona com os outros elementos. Em suma, o DOM é um conjunto de instruções sobre como criar uma página da internet específica. O DOM diz ao navegador como renderizar o conteúdo da página da internet e permite que os desenvolvedores da Net editem o DOM through código -fonte.
Neste artigo abaixo, veremos o que é o DOM, como é, como é usado e por que você deve se importar.
Aprenda algo novo de graça
Quais elementos compõem o DOM?
Agora que sabemos que o DOM significa Modelo de Objeto de Documento, vamos dividir cada palavra do acrônimo para explicar melhor como esses elementos representam a estrutura de uma página da Net:
Documento
Podemos pensar em um documento como uma maneira de estruturar informações, incluindo artigos, livros e artigos científicos. Para desenvolvedores da Net, um documento é um nome para uma página da internet e eles consideram o DOM como um modelo para todas as coisas na página da internet. O DOM chama esse materials para objetos.
Objeto
As “coisas” nas páginas da internet são objetos e às vezes são chamadas de elementos ou nós. Aqui estão alguns objetos que você pode encontrar em uma página da internet:
Contente. Os objetos mais óbvios em uma página da internet são o conteúdo. Isso pode incluir palavras, vídeos, imagens e muito mais.
Elementos estruturais. Isso inclui divs, recipientes e seções. Você pode não ver esses elementos, mas vê como eles afetam os elementos visíveis porque organizam esses elementos na página da internet.
Atributos. Cada elemento em uma página da internet possui atributos. Isso inclui aulas, estilos e tamanhos, por exemplo. Esses são objetos no DOM, mas não são elementos como o conteúdo e os elementos estruturais.
Modelo
Um modelo é uma representação de algo e nos ajuda a entender como algo é montado. Existem modelos para muitas coisas que precisam ser universalmente compreendidas, analisadas e usadas.
Um exemplo de modelo usado é para instruções. Blueprints, plantas e instruções da IKEA são exemplos desse tipo de modelo. Eles mostram o objeto sendo modelado com detalhes suficientes para que ele possa ser recriado.
Outro exemplo de modelo é uma descrição. Esse tipo de modelo é usado para simplificar grandes idéias ou sistemas complexos, para que possam ser entendidos com mais facilidade. Esses tipos de modelos nos ajudam a entender coisas como a nossa galáxia.
Essencialmente, o DOM é um modelo para páginas da internet. Ele atua como um conjunto de instruções para navegadores da Net.
Como é o DOM?
O DOM é representado como um tipo de estrutura de dados chamada árvore. Todo objeto no DOM está hierarquicamente sob outro objeto, e qualquer objeto pode ter vários filhos, mas apenas um dos pais.
Cada objeto DOM “possui” seus filhos. Se você remover um objeto do DOM, todos os seus filhos também serão removidos com ele.
O próprio DOM é digital, por isso não se parece com nada, mas pode ser representado de algumas maneiras diferentes. Essas representações podem nos ajudar a visualizar o que é DOM.
Gráfico de árvore
Uma maneira de representar o DOM é com um gráfico de árvore. Um gráfico de árvores mostra a relação entre objetos de pai e filho, com linhas entre eles representando seu relacionamento.
Pegue uma árvore genealógica como exemplo. No topo, você teria seus avós. Então, abaixo, você teria seus pais e seus irmãos, seguidos por você, seus irmãos e seus primos.
Da mesma forma, o nó raiz – o nó na parte superior do gráfico da árvore – de uma página da internet seria o elemento HTML. Abaixo, você teria os elementos da cabeça e do corpo. Debaixo do elemento corporal, você poderá encontrar elementos de cabeçalho, principal e rodapé. Abaixo do elemento do cabeçalho, você pode encontrar elementos IMG, NAV e H1.
Html
A maneira mais comum de representar o DOM é com Html. Você pode dar uma olhada no HTML de uma página da internet abrindo as ferramentas do desenvolvedor no seu navegador ou clicando com o botão direito do mouse em um elemento e escolhendo “elemento inspecionador”. Aqui está um exemplo de html:
...
...
Essa lista de elementos pode não parecer uma estrutura de árvore a princípio, mas todo recuo no inspetor do navegador ou no exemplo acima é como um nível vertical em um gráfico de árvores.
Os elementos HTML envolvem outros elementos que são seus filhos. O elemento IMG é um filho do elemento de cabeçalho, que é um filho do elemento corporal, que é um filho do elemento HTML.
Embora essa seja a maneira mais comum de representar o DOM, o HTML não é o próprio DOM – ele apenas o representa.
Código -fonte
Existem mais maneiras de criar um documento do que usar o HTML. Você pode usar uma linguagem de programação de back-end como Php Para gerar HTML quando uma página da internet é carregada. Você pode usar JavaScript Para modificar os elementos na página da internet dinamicamente. Ou, você pode usar uma estrutura front-end como Reagir Para criar páginas da internet completas sem escrever nenhum HTML.
Página da internet renderizada
Também podemos visualizar o DOM na página da internet renderizada quando o navegador a converter em algo que podemos ver no navegador.
O que é manipulação de DOM?
A manipulação DOM é o processo de uso do JavaScript (ou outro idioma de script) para alterar dinamicamente a estrutura, o conteúdo ou o estilo de uma página da internet após o carregamento. É isso que torna os websites modernos interativos e responsivos. Em vez de recarregar a página inteira toda vez que um usuário clica em um botão ou envia um formulário, os desenvolvedores da Net podem usar a manipulação do DOM para atualizar partes específicas da página em tempo actual.
Por exemplo, você pode usar o JavaScript para alterar o texto de um título, adicionar novos elementos a uma lista, ocultar ou mostrar seções da página ou até aplicar novos estilos com base nas interações do usuário. A manipulação de DOM é poderosa porque permite que os websites se sintam mais rápidos e perfeitos, criando uma experiência melhor para os usuários.
