4.1 Attribute manipulieren
Attribute und Stile von DOM-Elementen zu manipulieren, ist ein wichtiger Teil der Arbeit mit Web-Dokumenten. Das erlaubt, das Aussehen von Elementen und ihr Verhalten basierend auf Benutzeraktionen oder anderen Bedingungen zu ändern.
1. Attribute abrufen
Um die Werte von Attributen eines Elements zu erhalten, wird die Methode getAttribute() verwendet.
Beispiel:
<!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); // Zeigt: https://example.com
</script>
</body>
</html>
2. Attribute setzen
Um den Wert eines Attributs eines Elements festzulegen oder zu ändern, wird die Methode setAttribute() benutzt.
Beispiel:
<!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')); // Zeigt: https://newexample.com
</script>
</body>
</html>
3. Attribute entfernen
Um ein Attribut eines Elements zu entfernen, wird die Methode removeAttribute() verwendet.
Beispiel:
<!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')); // Zeigt: null
</script>
</body>
</html>
4. Vorhandensein von Attributen prüfen
Um das Vorhandensein eines Attributs zu überprüfen, wird die Methode hasAttribute() verwendet.
Beispiel:
<!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')); // Zeigt: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Zeigt: false
</script>
</body>
</html>
4.2 Klassen manipulieren
1. Klassen hinzufügen
Um einer Klasse ein Element hinzuzufügen, wird die Methode classList.add() verwendet.
Beispiel:
<!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. Klassen entfernen
Um eine Klasse von einem Element zu entfernen, wird die Methode classList.remove() genutzt.
Beispiel:
<!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. Klassen umschalten
Um eine Klasse umzuschalten, wird die Methode classList.toggle() verwendet. Sie fügt die Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie vorhanden ist.
Beispiel:
<!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'); // Fügt die Klasse hinzu. Bei erneutem Klicken entfernt sie die Klasse.
});
</script>
</body>
</html>
4. Vorhandensein einer Klasse prüfen
Um das Vorhandensein einer Klasse zu überprüfen, wird die Methode classList.contains() verwendet.
Beispiel:
<!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')); // Zeigt: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Zeigt: false
</script>
</body>
</html>
4.3 Stile manipulieren
1. Inline-Stile ändern
Um die Inline-Stile eines Elements zu ändern, wird die Eigenschaft style verwendet.
Beispiel:
<!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. Berechnete Stile abrufen
Um die aktuellen berechneten Stile eines Elements zu erhalten, wird die Methode window.getComputedStyle() genutzt.
Beispiel:
<!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); // Zeigt: rgb(0, 0, 255) oder blau
console.log(styles.fontSize); // Zeigt: 18px
</script>
</body>
</html>
3. Inline-Stile entfernen
Um Inline-Stile zu entfernen, stellt man den Wert des Stils auf einen leeren String.
Beispiel:
<!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