4.1 Manipulação de Atributos
Manipular atributos e estilos dos elementos DOM é uma parte importante do trabalho com documentos web. Isso permite mudar a aparência e o comportamento dos elementos com base nas ações do usuário ou outras condições.
1. Obtendo Atributos
Para obter valores de atributos de um elemento, usamos o método getAttribute().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // Mostrará: https://example.com
</script>
</body>
</html>
2. Configurando Atributos
Para definir ou alterar o valor de um atributo de um elemento, usamos o método setAttribute().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // Mostrará: https://newexample.com
</script>
</body>
</html>
3. Removendo Atributos
Para remover um atributo de um elemento, usamos o método removeAttribute().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // Mostrará: null
</script>
</body>
</html>
4. Verificando a Existência de Atributos
Para verificar se um atributo existe, usamos o método hasAttribute().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // Mostrará: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Mostrará: false
</script>
</body>
</html>
4.2 Manipulação de Classes
1. Adicionando Classes
Para adicionar uma classe a um elemento, usamos o método classList.add().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Removendo Classes
Para remover uma classe de um elemento, usamos o método classList.remove().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Alternando Classes
Para alternar uma classe, usamos o método classList.toggle(). Ele adiciona a classe se não estiver presente,
e a remove se já estiver.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Click me!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Adiciona a classe. Ao clicar novamente, remove a classe.
});
</script>
</body>
</html>
4. Verificando a Existência de uma Classe
Para verificar se uma classe está presente, usamos o método classList.contains().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Mostrará: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Mostrará: false
</script>
</body>
</html>
4.3 Manipulação de Estilos
1. Alterando Estilos Inline
Para alterar os estilos inline de um elemento, usamos a propriedade style.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Obtendo Estilos Calculados
Para obter os estilos calculados de um elemento, usamos o método window.getComputedStyle().
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Mostrará: rgb(0, 0, 255) ou azul
console.log(styles.fontSize); // Mostrará: 18px
</script>
</body>
</html>
3. Removendo Estilos Inline
Para remover estilos inline, basta definir o valor do estilo como uma string vazia.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION