Se você quer ser um desenvolvedor web, precisa saber o que é o DOM. Você deve saber como escolher diferentes elementos DOM para poder ler seus conteúdos ou alterá-los. A travessia do DOM informa como percorrer o DOM usando JavaScript que os documentos HTML criam. Aqui está um guia completo sobre como usar o JavaScript para percorrer o DOM.
O Document Object Model, ou DOM, é uma maneira semelhante a uma árvore para mostrar a aparência de um documento HTML. Ele fornece uma API que permite que você, como desenvolvedor da Web, use JavaScript para interagir com um site. Cada parte do DOM é chamada de “nó”. O DOM é a única maneira de alterar a estrutura, o conteúdo e o estilo de um documento HTML.
A travessia do DOM, também chamada de caminhada ou navegação no DOM, é o processo de escolha de nós na árvore DOM de outros nós. Você provavelmente já sabe como usar o id, a classe ou o nome da tag de um elemento para acessá-lo na árvore DOM.
Como percorrer o DOM usando JavaScript
Entendendo a árvore DOM
O DOM é configurado como uma árvore, com cada ramificação sendo um nó. Embora muitos nós representem elementos HTML, eles também representam os atributos e o texto que acompanham os elementos. Nas seções a seguir, você aprenderá mais sobre como a árvore DOM é montada. Você também aprende sobre as partes que são usadas para identificar nós e grupos de nós, que é a chave para acessar os nós de uma forma útil.
O objeto documento é a base de todos os nós do DOM. Os nós são organizados como uma árvore, com nós aninhados sob outros nós. Abaixo está um exemplo da representação DOM de uma página web simples: Conhecer a disposição da árvore DOM e suas folhas ajuda a entender como acessar nós específicos ao trabalhar com JavaScript. Isso é especialmente verdadeiro quando você está trabalhando com páginas da Web mais complicadas. A seção Navegando na árvore DOM deste guia inclui uma discussão mais aprofundada sobre como mover os nós da árvore DOM.
Navegando na Árvore DOM
Usando métodos padrão em objetos DOM. Eles existem há mais tempo e fornecem alguns dos métodos de seleção mais diretos. Usando seletores de consulta. Esses são recursos relativamente novos no JavaScript padrão e fornecem métodos de seleção avançados. Eles são ideais quando você deseja fazer consultas complicadas em poucos comandos.
FAQ
Você pode acessar o DOM usando JavaScript?
JavaScript pode usar o atributo className de um elemento HTML para localizá-lo e retornar uma matriz de nós correspondentes. getElementByClassName é a função interna para esta operação ().
Como lidar com DOM em JavaScript?
JavaScript pode alterar todos os elementos HTML na página. O JavaScript pode alterar todos os atributos HTML na página. O JavaScript pode alterar todos os estilos CSS na página. O JavaScript pode remover elementos e atributos HTML existentes. O JavaScript pode adicionar novos elementos e atributos HTML.
Como faço para acessar o DOM de um site?
Foque o cursor no painel Elementos. Pressione Control + F ou Command + F (Mac). A barra de pesquisa é aberta na parte inferior da Árvore DOM. Digite A Lua é uma amante severa. A última frase é destacada na Árvore DOM.