30:Te68,Muitas vezes, a programação em javascript será utilizada para modificar elementos ou conteúdos presentes dentro do próprio código *HTML*, que lhe serve como uma uma embalagem. Os elementos do *HTML*, isto é, sua estrutura de *tags*, compõem o *Document Object Model* (DOM), que é uma estrutura de árvore, composta por um uma única *tag* (a ``), que possui duas *tags* filhas (a `` e a ``), que por sua vez possuem inúmeras outras *tags* filhas, e assim sucessivamente. Esta estrutura, portanto, acaba se tornando muito complexa, e com muitas ramificações, e para se fazer qualquer modificação nela, ou em seus conteúdos, é necessário, primeiro, selecionar o elemento a ser modificado. Há três maneiras como esses elementos podem ser selecionados: pela sua propriedade `id`, pelas sua propriedade `class`, ou pela própria *tag*. A propriedade `id` é dada da seguinte forma no código *HTML*: ```html

... conteúdo ...

``` A mesma coisa vale para a propriedade `class`. Contudo, está poderá ter o mesmo valor diversas vezes ao longo de múltiplas *tags HTML*. ```html

... conteúdo ...

... conteúdo...

``` Selecionar elementos pelo `id` é a forma mais simples para modificá-los, uma vez que o `id` é, à princípio, um identificador único que apontará para um elemento específico dentro desta estrutura. Selecionar elementos pela propriedade `class` ou pela sua *tag* pode produzir uma *array* de elementos, já que ambos os critérios aparecem múltiplas vezes ao longo do código *HTML*. Para se manipular um elemento específico através desta forma de seleção, será também necessário indicar qual o número do elemento, por ordem de seu aparecimento no código. Para se selecionar o elemento no DOM, utilizamos a instrução `document.querySelector()` para capturar o primeiro elemento com as características dadas, ou `document.querySelectorAll()` para capturar uma *array* de elementos, já considerando a possibilidade de serem múltiplos. Se a seleção for feita através de um `id`, o termo de seleção dado a ela deverá ser precedido por um caractere `#`; se for um `class`, pelo caractere `.`; mas se estivermos falando de uma *tag* propriamente, ele deverá conter apenas o nome da *tag*. Estas convenções são as mesmas utilizadas nos seletores *CSS*, e podem ser combinadas como `div#meuId ol.classeX li`, da mesma forma que os seletores *CSS* o são. Para selecionarmos o único elemento cujo `id` é `meuElemento`, utilizaremos a seguinte instrução: ```js let bloco = document.querySelector("#meuElemento"); ``` Para selecionarmos um conjunto de elementos, cuja propriedade `class` é `classeX`, utilizaremos a seguinte instrução: ```js let classes = document.querySelectorAll(".classeX"); ``` E para selecionarmos elementos com a *tag* `

`, utilizaremos a seguinte instrução: ```js let tagsdiv = document.querySelectorAll("div"); ``` Se quisermos fazer uma combinação de aspectos, podemos utilizar: ```js let especificos = document.querySelectorAll("div.classeX"); ``` Mas ao contrário de `bloco`, `classes` e `tagsdiv` ou `especificos` são *arrays*, e para acessar um de seus elementos, será necessário se referenciar a ele como `classes[3]` ou `tagsdiv[0]`, por exemplo. Após selecionado o elemento, é possível alterar seu conteúdo e inserir dentro dele qualquer novo código *HTML* através da propriedade `innerHTML`: ```js tagsdiv[0].innerHTML = ` meu site `; ```31:T627,Mas modificar seu conteúdo, mesmo que incluindo um novo código *HTML* em seu lugar, não é a única coisa que podemos alterar após capturar estes elementos com `document.querySelector()` ou `document.querySelectorAll()`. Também podemos modificar suas propriedades, como por exemplo seu `id`, com `setAttribute()` ou identificar uma de suas propriedades com `getAttribute()`: ```js let meuelemento = document.querySelector("#meuId"); meuelemento.setAttribute("class", "classeX"); ``` ou ```js let meuelemento = document.querySelector("#meuId"); let classeDoElemento = meuelemento.getAttribute("class"); ``` Podemos modificar as características de *CSS* atribuídas ao elemento, com seu *objeto* `style`: ```js let meuelemento = document.querySelector("#meuId"); meuelemento.style.marginTop = "20px"; ``` Também podemos adicionar ou remover classes com `classList`: ```js let meuelemento = document.querySelector("#meuId"); meuelemento.classList.remove("classeX"); ``` Podemos associar o clicar do mouse à execução de uma *função* javascript: ```js let meuelemento = document.querySelector("#meuId"); meuelemento.onclick = function() { // Ação a ser executada } ``` Assim como uma diversidade muito grande de recursos disponíveis aos elementos *HTML*. A lista de propriedades, variáveis, características ou eventos que podem ser consultados ou atribuídos é muito grande e variada. De forma geral, quase todas as interações com websites são criadas através de programação javascript, e construídas a partir da captura dos elementos no DOM.32:[] 2e:{"title":"DOM","cells":[{"id":0,"value":"# DOM","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"### *Document Object Model* - os elementos do documento HTML\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"Capturar múltiplos elementos em uma *array* pode ser interessante para fazer modificações em diversos deles ao mesmo tempo, como no exemplo abaixo:","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}