JavaScript - Manipulation von Webseiten

Selektion von Elementen

Elemente einer Webseite können anhand ihrer ID, Klassen oder TagNames selektiert und in Variablen geschrieben werden.

// select the first element
const ersterAbsatz = document.querySelector('p');
const wichtigeKlasse = document.querySelector('.sinn');

// select all elements fitting the selector
const alleAbsaetze = document.querySelectorAll('p'); // alle Absätze der Seite


TIPP: Zum Finden von Fehlern ("debuggen") kann man die selektierten Objekte mit console.log(ersterAbsatz) ausgeben lassen. Mit der Maus darüberfahren und die Elemente werden auf der Seite dann farbig hervorgehoben.

Ältere Methoden zum Selektieren sind getElementByID(), getElementsByName(), getElementsByTagName(), getElementsByClassName()

Vgl.:

Wenn die Methode nur ein Objekt selektiert (getElementByID oder querySelector), kann es direkt verwendet werden. Ansonsten muss mit einer Schleife über das "Array von Objekten" gegangen werden:

const ersterAbsatz = document.querySelector('p');
console.log(ersterAbsatz.innerHTML);

const alleAbsaetze = document.querySelectorAll('p');

for (var i = 0; i < alleAbsaetze.length; i++) {
    console.log(alleAbsaetze[i]);
}

//oder einfacher:

for (absatz of alleAbsaetze) {
    console.log(absatz.innerHTML);
}

Die Eigenschaft innerHTML gibt den Inhalt des selektierten Elements aus, kann aber auch überschrieben werden:

const wichtigerAbsatz = document.querySelector('p.sinn');

wichtigerAbsatz.innerHTML = '42';

Vgl.: https://www.w3schools.com/jsref/prop_html_innerhtml.asp