4.1 Manipolazione degli attributi
Manipolare gli attributi e gli stili degli elementi DOM è una parte importante del lavoro con i documenti web. Questo permette di modificare l'aspetto degli elementi e il loro comportamento basato sulle azioni dell'utente o altre condizioni.
1. Ottenere attributi
Per ottenere i valori degli attributi di un elemento si usa il metodo getAttribute().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visita Example.com</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // Mostrerà: https://example.com
</script>
</body>
</html>
2. Impostare attributi
Per impostare o modificare il valore di un attributo di un elemento si usa il metodo setAttribute().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visita Example.com</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // Mostrerà: https://newexample.com
</script>
</body>
</html>
3. Rimuovere attributi
Per rimuovere un attributo di un elemento si usa il metodo removeAttribute().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visita Example.com</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // Mostrerà: null
</script>
</body>
</html>
4. Verificare la presenza di attributi
Per verificare la presenza di un attributo si usa il metodo hasAttribute().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visita Example.com</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // Mostrerà: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Mostrerà: false
</script>
</body>
</html>
4.2 Manipolazione delle classi
1. Aggiungere classi
Per aggiungere una classe a un elemento si usa il metodo classList.add().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Rimuovere classi
Per rimuovere una classe da un elemento si usa il metodo classList.remove().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Alternare classi
Per alternare una classe si usa il metodo classList.toggle(). Aggiunge la classe se non è presente, e la rimuove se lo è.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Cliccami!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Aggiungerà la classe. Al secondo click la rimuoverà.
});
</script>
</body>
</html>
4. Verificare la presenza di una classe
Per verificare la presenza di una classe si usa il metodo classList.contains().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Mostrerà: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Mostrerà: false
</script>
</body>
</html>
4.3 Manipolazione degli stili
1. Modificare gli stili inline
Per modificare gli stili inline di un elemento si usa la proprietà style.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Ottenere gli stili calcolati
Per ottenere gli stili calcolati correnti di un elemento si usa il metodo window.getComputedStyle().
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Mostrerà: rgb(0, 0, 255) o blu
console.log(styles.fontSize); // Mostrerà: 18px
</script>
</body>
</html>
3. Rimuovere stili inline
Per rimuovere gli stili inline, basta impostare il valore dello stile su una stringa vuota.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">Questo è un paragrafo.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION