image

Access unlimited bootcamps and 650+ courses forever

60
%OFF
Article image

JR

João Rangel26/11/2024 15:23
Share

O Que é a DOM? (introdução básica)

    O que é a DOM??

    a Sigla vem do inglês Document Model Object, significa Modelo de Documento do Objeto e ela é responsável por toda a parte de gerenciamento dos arquivos HTML e CSS da Página.

    Em uma analogia simples é como se o HTML representasse todo esqueleto da página, CSS é sua pele e seus cabelos, e o JavaScript por meio da DOM seria todo Sistema Nervoso e Alma da Página, tudo que gera interação e deixa ela de um jeito único.

    image

    Qual é a relação direta da DOM com JS??

    Como Muito de nós sabemos e pra quem ainda não sabe JavaScript é a Linguagem de programação responsável pela manipulção do Front-End.

    Agora que já temos esses termos em mente, o JavaScript basicamente é o meio usado

    para manipularmos toda Página HTML, ele que faz o DOM ser um universo de possibilidades para conseguirmos adicionar ações nas nossas páginas web.

    Como Usar o DOM??

    Não há Necessidade de Baixar nenhum pacote para acessá-lo , o DOM já é incluido nativamente no JS, podendo ser ativado durante a escrita dos scripts.

    Ou seja, quando se digita:

    Document.GetElementById("Button")
    

     Já se está acessando a DOM API sem a necessidade de nenhum pacote externo.

    image

    fonte: https://www.codingcreativo.it/javascript-dom/

    Dados Básicos da DOM

    Para compreendermos o funcionamento da DOM precisamos conhecer seus dados fundamentais, que são os 5 seguintes:

    • Document: O objeto raiz que representa o documento HTML inteiro.
    • Node: Um nó no documento, usado como uma nomenclatura genérica; todo objeto no documento é algum tipo de nó.
    • Attribute: Um tipo de objeto que representa os atributos de um elemento HTML.
    • Element: Um nó do tipo elemento que representa as tags do HTML. Pode conter "nós-filhos", como texto e atributos.
    • Text: Representa o conteúdo textual localizado entre as tags HTML. Por exemplo: no elemento `<p>aqui está um parágrafo</p>`, o texto "aqui está um parágrafo" é o nó de texto.

    Referências:

    https://www.hostinger.com.br/tutoriais/dom-o-que-e#Qual_a_Relacao_Entre_DOM_e_JavaScript
    https://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos
    Share
    Comments (0)