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 `; ```