Einführung in das Document-Objekt in JavaScript und Codebeispiele
Einführung:
In JavaScript ist das Document-Objekt eine Schnittstelle, die das gesamte HTML-Dokument darstellt. Es bietet Zugriffs- und Betriebsmethoden für das HTML-Dokument. In diesem Artikel werden die allgemeinen Methoden und Eigenschaften des Document-Objekts vorgestellt und einige spezifische Codebeispiele bereitgestellt.
<html>
<body>
<h1 id="myHeading">Hello, World!</h1>
<script>
var heading = document.getElementById("myHeading");
heading.innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>Im obigen Code wird der Elementknoten mit der ID „myHeading“ über die Methode getElementById abgerufen und sein Inhalt mithilfe des innerHTML-Attributs in „Hallo, JavaScript!“ geändert.
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.color = "red";
}
</script>
</body>
</html>Im obigen Code werden alle Li-Elementknoten über die Methode getElementsByTagName abgerufen und die Textfarbe jedes Li-Elements durch eine for-Schleife in Rot geändert.
<html>
<body>
<div id="myDiv"></div>
<script>
var newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
document.getElementById("myDiv").appendChild(newElement);
</script>
</body>
</html>Im obigen Code wird über die Methode „createElement“ ein neuer p-Elementknoten erstellt und mithilfe der Methode „appendChild“ zum div-Element mit der ID „myDiv“ hinzugefügt.
Zusammenfassung:
In diesem Artikel werden einige gängige Methoden und Eigenschaften von Document-Objekten in JavaScript vorgestellt, darunter getElementById, getElementsByTagName, createElement und appendChild. Mithilfe dieser Methoden und Eigenschaften können Sie problemlos auf die Elementknoten von HTML-Dokumenten zugreifen und diese bedienen. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele für Leser hilfreich sind, die JavaScript lernen und verwenden.
Das obige ist der detaillierte Inhalt vonEinführung in das Dokumentobjekt in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
