Heim  >  Artikel  >  Web-Frontend  >  Javascript auswählen und ändern

Javascript auswählen und ändern

王林
王林Original
2023-05-17 15:43:38564Durchsuche

JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache. Sie kann dynamische Effekte auf Webseiten erzielen, indem sie DOM-Elemente auswählt und ändert. Dieser Artikel behandelt die Auswahl und Änderung in JavaScript.

Auswahl

JavaScript kann DOM-Elemente auf folgende Weise auswählen:

1. Tag-Namen-Selektor

Verwenden Sie den Tag-Namen-Selektor, um alle Elemente mit diesem Tag-Namen auf der Webseite auszuwählen. Wählen Sie beispielsweise alle p-Elemente aus:

var pElements = document.getElementsByTagName("p");

2. ID-Selektor

Verwenden Sie den ID-Selektor, um Elemente mit einer bestimmten ID auszuwählen. Wählen Sie beispielsweise das Element mit der ID „myDiv“ aus:

var myDiv = document.getElementById("myDiv");

3. Verwenden Sie den Klassenselektor, um Elemente mit einem bestimmten Klassennamen auszuwählen. Wählen Sie beispielsweise Elemente mit der Klasse „myClass“ aus:

var myElements = document.getElementsByClassName("myClass");

4. Attributselektoren verwenden, um Elemente mit bestimmten Attributen auszuwählen. Um beispielsweise alle Elemente mit dem Attribut „Datentyp“ auszuwählen:

var elementsWithType = document.querySelectorAll("[data-type]");

Ändern

Mit der Methode „Element auswählen“ kann JavaScript auch das ausgewählte Element ändern.

1. Ändern Sie den Textinhalt des Elements

Sie können den Textinhalt des Elements ändern, indem Sie das innerHTML-Attribut des Elements ändern. Ändern Sie beispielsweise den Textinhalt des Elements mit der ID „myDiv“ in „Hello World!“:

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

2. Ändern Sie den Stil des Elements

Sie können den CSS-Stil des Elements ändern, indem Sie den Stil des Elements ändern Attribut. Ändern Sie beispielsweise die Hintergrundfarbe des Elements mit der ID „myDiv“ in Rot:

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";

3 Ändern Sie die Klasse des Elements

Sie können die Klasse des Elements ändern, indem Sie das Attribut „className“ des Elements ändern. Ändern Sie beispielsweise die Klasse des Elements mit der ID „myDiv“ in „newClass“:

var myDiv = document.getElementById("myDiv");
myDiv.className = "newClass";

4 Ändern Sie die Attribute des Elements

Sie können andere Attribute des Elements ändern, indem Sie die Attribute des Elements ändern. Ändern Sie beispielsweise das Alt-Attribut des Elements mit der ID „myDiv“ in „newAlt“:

var myDiv = document.getElementById("myDiv");
myDiv.alt = "newAlt";

Fazit

JavaScript kann dynamische Effekte auf Webseiten erzielen, indem DOM-Elemente ausgewählt und geändert werden. In diesem Artikel werden die Auswahl und Änderung in JavaScript vorgestellt, einschließlich Tag-Namen-Selektoren, ID-Selektoren, Klassen-Selektoren, Attribut-Selektoren sowie das Ändern des Textinhalts, des Stils, der Klasse und der Attribute von Elementen. Durch die Beherrschung dieser Fähigkeiten können Entwickler JavaScript bei der Website-Entwicklung flexibler einsetzen.

Das obige ist der detaillierte Inhalt vonJavascript auswählen und ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn