Javascript auswählen und ändern

王林
Freigeben: 2023-05-17 15:43:38
Original
546 Leute haben es durchsucht

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");
Nach dem Login kopieren

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");
Nach dem Login kopieren

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");
Nach dem Login kopieren

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]");
Nach dem Login kopieren

Ä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!";
Nach dem Login kopieren

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";
Nach dem Login kopieren

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";
Nach dem Login kopieren

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";
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!