getElementById
Lektion 3 von 13 im Kurs JavaScript DOM-Methoden von Coddy.
Die Funktion getElementById() ruft das erste Element mit einem passenden id-Attribut ab, zum Beispiel:
const element = document.getElementById("elementId"); Das Obige ruft das Element mit der ID elementId ab und speichert es in einer Variablen namens element.
Beachten Sie das Präfix
document, dies ist das DOM der HTML-Datei.
Nachdem Sie ein Element abgerufen haben, können Sie es mit JavaScript manipulieren!
Die erste Eigenschaft, die wir lernen werden, ist textContent, welche den Textinhalt des Elements enthält. Sie können den Text wie folgt ändern:
const element = document.getElementById("elementId");
element.textContent = "some text";Nach diesem Code wird der Text von #elementId some text sein.
Aufgabe
EinfachDir wird ein HTML-Code gegeben, der eine Überschrift mit einer ID enthält.
Verwende ausschließlich JavaScript, um den Text dieses Elements in “Hello!” zu ändern:
- Rufe das Element mit der Funktion
getElementByIdab. - Ändere den Text des Elements mit der Eigenschaft
textContent.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome!</h1>
<script src="script.js"></script>
</body>
</html>Alle Lektionen in JavaScript DOM-Methoden
2DOM-Methoden I
getElementByIdElement-Stil änderngetElementsByClassNameDurchlaufen und manipulierengetElementsByTagNamequerySelector