DOM com JavaScript

O Modelo de Objeto de Documento (DOM) é a interface de programação de aplicações (API) que representa a estrutura de uma página da web.

[{"selector":"#anim-df84c303-faef-40c4-aca6-33b3c69cf51a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-ba3cb322-082e-4d4d-a49c-7bece7b870cb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23e61538-2c16-42db-9fdf-37d8dbada26f","keyframes":{"transform":["translate3d(0px, -211.36078%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a083cc8b-7d5f-47f6-b123-a1e4e9a207d1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c5954d5-2c42-480b-bc4c-5d79e4007fa7","keyframes":{"transform":["translate3d(0px, 252.07806%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é o DOM?

[{"selector":"#anim-11282170-3c63-413e-ad46-b72ab0d78c38 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-62.44873024089035%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-eabb2395-e685-4ea5-b0e6-5784dc61b427","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-43151074-f7cd-454c-8f70-3dc133ab0d01","keyframes":{"transform":["translate3d(114.46540%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cff11bd6-7e60-4203-bab4-8aa0b6759de9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4cb32642-3dde-4052-a1dd-d57ecddc3402","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-606a67e0-da2c-4211-8c20-72ce1f4fb832","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14075f0e-1cae-4895-962d-005155785ebe","keyframes":{"transform":["translate3d(114.77986%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Selecionando elementos no DOM

[{"selector":"#anim-9bb07ebf-340a-4618-8336-e45211f9e489 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-3e7a237b-1cd6-44b1-8b62-65ec20f2081d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-71aae49f-3dcc-45f6-a762-bbf27ae8be16","keyframes":{"transform":["translate3d(0px, -173.38994%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b8b0eca-4480-49b5-9877-b37bc04b3e6a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0b173b7f-250d-4a3e-a4f0-9a0ec08075b4","keyframes":{"transform":["translate3d(0px, 155.08164%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-767e1dd2-295c-47dd-a969-4d8cdf8845ef","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-153ec996-14f5-4e38-b47a-3b4026d352cd","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Manipulando elementos no DOM

[{"selector":"#anim-f1cecb5b-1f4d-4d61-b1a7-f92beeeae0b1 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-4e9398aa-fa4e-465f-b4c7-1cdc35fa4930","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a1515ec0-4993-4759-b421-cc68eb8b56c8","keyframes":{"transform":["translate3d(113.35403%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ac82f3b7-745c-4465-963c-c975fded91d7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c45fa7a6-52a4-408d-b9be-8b594aa1aa84","keyframes":{"transform":["translate3d(-114.69649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5ad24f4c-cae0-477b-a465-1a8fec874f42","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c4f72478-4cd6-46b1-b16c-ca26a2c9b189","keyframes":{"transform":["translate3d(118.64952%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e3d49160-d317-4d40-a7fd-64c1ab451968","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-59e48ccb-601e-43d4-9b5b-07cf23ae220a","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Criando e adicionando elementos no DOM

[{"selector":"#anim-43dee4ec-0338-4314-a63c-e6ef756dad6c [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(14.392977369825196%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-6c88b947-96f1-4baa-a7bf-9248e3d1daa4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6e95aa17-87db-47cf-a30b-30c584f5552a","keyframes":{"transform":["translate3d(0px, -162.0106%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cfe14dc7-ac51-4bc7-9dfa-78a2ce9dbdf3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-abcbc0fd-cc9e-4480-b3eb-d0044b33b69f","keyframes":{"transform":["translate3d(0px, 182.41915%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f070f060-02de-4dd9-ac41-f507f874be44","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8e2ad47e-af7a-490b-9fa9-cd3c98a6f67c","keyframes":{"transform":["translate3d(-115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Com o JavaScript você adiciona o dinamismo aos seus sites e atrai muito mais usuários!

[{"selector":"#anim-59724be5-0692-4208-a29e-9e9e3ee4e1cd [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.246337776828504%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-37639c3f-74b4-414d-bcab-e644152edd9d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a2fdbd09-3a8a-4344-8e44-1f819e8a3e31","keyframes":{"transform":["translate3d(115.97445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6c4fad96-51f6-4dc1-8d81-d51344cb3cd2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5e8f7caa-409b-44f3-a2fd-b363bc890fee","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre JavaScript

[{"selector":"#anim-bdf8f91f-01f1-416d-89dc-f7dba02cb446","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fce7e1e6-0032-4e4f-a4b5-d9110fd291ed","keyframes":{"transform":["translate3d(-113.58024%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3affed46-b676-4656-80d8-7f00d7dce228","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0cc157fd-e28b-4440-8a08-e616e0b5e81b","keyframes":{"transform":["translate3d(118.32797%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-843f0222-69bd-4cf0-b402-550947de0fa2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Leia mais

DOM com JavaScript

Conheça o básico da linguagem web mais usada.

O Modelo de Objeto de Documento (DOM) é a interface de programação de aplicações (API) que representa a estrutura de uma página da web.

O que é o DOM?

O DOM é uma representação da estrutura de uma página da web, com cada elemento da página sendo representado como um objeto na árvore do DOM.

Selecionando elementos no DOM

Para selecionar um elemento no DOM, você pode usar o método "getElementById" para selecionar um elemento com um ID específico, ou o método "querySelector" para selecionar um elemento com base em um seletor CSS.

Manipulando elementos no DOM

Depois de selecionar um elemento no DOM, você pode manipulá-lo alterando seu conteúdo, estilo ou atributos.

Para alterar o conteúdo de um elemento, você pode usar a propriedade "innerHTML".

Criando e adicionando elementos no DOM

Com JavaScript, você pode criar novos elementos no DOM e adicioná-los à página. Portanto, para criar um novo elemento, você pode usar o método "createElement".

Com o JavaScript você adiciona o dinamismo aos seus sites e atrai muito mais usuários!

Crie sites dinâmicos!

Aprenda mais sobre JavaScript

Confira o artigo completo clicando logo abaixo!