Um texto bonito aqui.
Essa div vai ser alterada...
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elemento = document.getElementById("algumaID"); document.getElementById("teste").innerHTML = "O texto do elemento com id = intro, é: " + elemento.innerHTML; ``` {% endtab %} {% endtabs %} ### document.getElementByClassName Outra forma de procurar elementos é utilizando o `document.getElementByClassName(nome)`, essa função quando utilizada retorna todos os elementos que encontrar que tiver as classes que estiverem no parâmetro nome. {% hint style="info" %} O parâmetro nome vai ser utilizado para pesquisar as classes da seguinte forma: * `document.getElementByClassName("azul")`: vai procurar elementos que contenham a classe azul. * `document.getElementByClassName("azul verde")`: vai procurar elementos que contenham a classe azul e verde. {% endhint %} {% tabs %} {% tab title="HTML" %} ```markupUma div azul.
Uma com tons de azul e verde.
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elementos = document.getElementByClassName("azul"); for (let elemento in elementos) { console.log(`Foi encontrado o elemento com id ${elemento.id} com a classe especificada`) } ``` {% endtab %} {% endtabs %} Você pode ter observado que a função `document.getElementByClassName` retorna vários elementos da página web, podemos usar essa mesma função em um elemento em si: * Utilizando a `document.getElementById("algumaID")` retornamos apenas um elemento da página web com a id "algumaID". * Dentro desse elemento podemos querer encontrar elementos com a classe "algumaClasse". * Observe o exemplo abaixo: {% tabs %} {% tab title="HTML" %} ```markupElemento 1 Elemento 2
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elementos = document.getElementById("algumaID").getElementByClassName("algumaClasse"); for (let elemento in elementos) { console.log(`Foi encontrado o elemento com o texto ${elemento.innerText} com a classe especificada`) } ``` {% endtab %} {% endtabs %} ### document.getElementsByTagName Bem parecido como a função `getElementsByClassName(nome)`, a `getElementsByTagName(nome)` vai procurar elementos na página web a partir do nome da sua tag. {% tabs %} {% tab title="HTML" %} ```markupElemento 1 Elemento 2
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elementos = document.getElementsByTagName("p"); // Vamos procurar os elementos que possuem a tag for (let elemento in elementos) { console.log(`Foi encontrado o elemento com o texto ${elemento.innerText} com a tag especificada`) } // Também podemos usar o getElementById var elementos = document.getElementById("algumaID").getElementsByTagName("span"); // Vamos procurar os elementos que possuem a tag for (let elemento in elementos) { console.log(`Foi encontrado o elemento com o texto ${elemento.innerText} com a tag especificada`) } ``` {% endtab %} {% endtabs %} ### document.querySelector e document.querySelectorAll Uma forma fácil de procurar elementos com uma diversidade de tags, classes e id é usando o `document.querySelector(seletores)`, nessa função podemos encontrar um elemento de acordo com seletores CSS, logo podemos em uma mesma função procurar um elemento com uma tag específica e classe específica, entre outras formas. ```javascript var elemento = document.querySelector("tag.classe"); // Nesse exemplo procuramoos o primeiro elemento com aUm texto bonito aqui.
``` {% endtab %} {% tab title="JavaScript" %} ```javascript var elemento = document.getElementById("algumaID") console.log(elemento.innerText) // Output: Um texto bonito aqui. element.innerText = "Outro texto bonito." // O elemento sofrerá alteração no seu texto da página web ``` {% endtab %} {% endtabs %} ### .innerHTML O innerHTML é utilizado para retornar o próprio HTML do elemento em formato de String. Também é possível fazer alterações nele para modificar o HTML de um elemento. {% tabs %} {% tab title="HTML" %} ```markupUm texto bonito aqui.
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elemento = document.getElementById("algumaID") console.log(elemento.innerHTML) /* Output:Um texto bonito aqui.
*/ element.innerHTML = 'Modificando o texto utilizando o .innerHTML
' // O elemento sofrerá alteração no seu texto da página web, a partir das alterações no seu HTML ``` {% endtab %} {% endtabs %} ### .tagName O tagName pode ser usado em um elemento, ele simplesmente retorna a tag de um elemento. O elemento não sofre alterações na sua tag se modificarmos ele através de tagName. {% tabs %} {% tab title="HTML" %} ```markupUma div azul.
Uma div azul.
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elemento = document.getElementById("minhaID"); var atributos = elemento.attributes for (let i = 0; i < atributos.length; i++) { console.log(`Foi encontrado o atributo ${atributos[i].name} com o valor ${atributos[i].value}`); } ``` {% endtab %} {% endtabs %} ### hasAttribute() , getAttribute(), setAttribute() Uma forma simples de verificar se um elemento possui um atributo é utilizado `hasAttribute(nome)`, com o nome sendo uma String com o nome do atributo que deseja ser verificado, a função retorna verdadeiro caso o elemento possua o atributo com o nome especificado e falso caso o contrário. A função `getAttribute(nome)` é utilizado para retornar o atributo especificado, com o atributo podemos pegar o valor dele, dentro outras coisas. A função retorna `null` ou uma string vazia caso não encontre o atributo especificado. A função `setAttribute(nome, valor)` é utilizada para setar o valor do atributo com o nome especificado, com o valor dado no seu parâmetro. {% tabs %} {% tab title="HTML" %} ```markup``` {% endtab %} {% tab title="Javascript" %} ```javascript var elemento = document.getElementById("texto"); console.log(`Possui o atributo value? ${elemento.hasAttribute("value"}`); // Output: true console.log(`O valor do atributo value: ${elemento.getAttribute("value".value}`); // Output: Nenhum elemento.setAttribute("value", "Um novo valor"); // A modificação ocorrera na página web ``` {% endtab %} {% endtabs %} ### .classList O classList permite uma fácil alteração das classes de um elemento HTML, com ele podemos: * `classList.add("classe", "outraClasse", ...)`: adicionar as classes especificadas para o elemento, caso ele ainda não contenha elas. * `classList.remove("classe", "outraClasse", ...)`: remover classes de um elemento. * `classList.contains("classe")`: verificar se o elemento contém a classe especificada. * `classList.toggle("classe", "outraClasse", ...)`: caso o elemento contenha as classes especificadas, ele remove ela, caso contrário ele adiciona. {% tabs %} {% tab title="HTML" %} ```markup
Uma div azul.
``` {% endtab %} {% tab title="Javascript" %} ```javascript var elemento = document.getElementById("minhaID"); elemento.classList.add("vermelho"); // Adiciona a classe vermelha ao elemento elemento.classList.remove("azul"); // Remove a classe azul do elemento console.log(`O elemento possui a classe azul? ${elemento.classList.contains("azul")}`); // Output: false elemento.classList.toggle("azul"); // Como o elemento não possui a classe azul, ele adiciona ela ``` {% endtab %} {% endtabs %} ### style Podemos utilizar o Javascript para estilizar o elemento e também retornar as propriedades do estilo do elemento. O seguinte elemento vai ser utilizado como base para a explicação seguinte: ```markupUm texto.
``` Para verificar a existência de uma propriedade CSS naquele elemento, pode ser utilizado o `style.getPropertyValue(nome)`, que retorna o valor da propriedade caso ela exista no atributo style do elemento e retorna uma string vazia caso não exista. * `style.removePropertyValue(nome)`: pode ser usado para remover uma propriedade do estilo de um elemento. A propriedade pode ser modificada utilizando diretamente `style.nomeDaPropriedade = "novo valor"`, que será aplicada ao estilo do elemento, mesmo que a propriedade não exista e uma forma de remover a propriedade é deixando o valor como uma string vazia. ```javascript var elemento = document.getElementById("minhaID"); console.log(`A propriedade color possui como valor: ${elemento.style.color}`); elemento.style.color = "black"; // O elemento sofrerá alterações no seu estilo ``` ## Navegar pelo DOM Além dos atributos, com um elemento HTML no seu código, também é possível navegar pelos elementos filho do elemento retornado. ```markupFilho 1 Filho 2
``` No exemplo acima, temos o elemento com a id "pai", tendo dois filhos: o primeiro elemento com a tag span e o segundo com a mesma tag; ambos estão dentro do seu pai, o elemento com a tag p com a id "pai". ### .children Podemos usar children de um elemento para buscar pelos elementos filhos de um elemento pai. Segue o exemplo: ```javascript var elemento = document.getElementById("pai"); var filhos = elemento.children; for (let i = 0; i < filhos.length; i++) { console.log(`Foi encontrado o elemento filho com o texto ${filhos[i].innerText}`); } ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://uclsanca.gitbook.io/learn/web-basico/javascript/o-que-e-o-dom-e-como-manipula-lo.md?ask=