JavaScript-Dokumentobjekt

Ein Dokumentobjekt stellt das HTML-Dokument dar, das im Fenster angezeigt wird. Das Dokument ist das übergeordnete Objekt von Objekten wie Bildern, Formularen usw. Die Größe des Client-Fensters hängt mit der Webseite zusammen, auf die wir über das Dokumentobjekt im JavaScript zugreifen. Dieses Objekt ist dasselbe wie die Methode getElementById(), mit der wir auf die Elemente auf der Webseite zugreifen. Das Dokumentobjekt verfügt über verschiedene Eigenschaften, die den Zugriff auf den Dokumentinhalt und dessen Änderung ermöglichen.

Wenn die Webseite geladen wird, erstellt der Browser ein Document Object Model (DOM) der Seite. Das DOM wurde nach dem W3C-Standard (World Wide Web Consortium) entwickelt. Das DOM ermöglicht den Zugriff auf und die Änderung von Inhalten und ist vom W3C standardisiert. Das DOM ist eine Anwendungsprogrammierschnittstelle (API), die die Schnittstelle zwischen XHTML-Dokumenten und Anwendungsprogrammen definiert. Im DOM-Objektmodell stellt das Dokumentobjekt eine Webseite dar. Wenn wir auf Objekte in einer HTML-Seite zugreifen möchten, beginnen wir mit dem Zugriff auf das Dokumentobjekt.

Das Dokumentobjekt stellt die folgenden Methoden bereit.

HTML-Elemente finden

Methodenbeschreibung

document.getElementById()Es wird verwendet, um über das ID-Attribut auf die Elemente zuzugreifen.
document.getElementByTagName()Es wird verwendet, um über das Tag-Namensattribut auf die Elemente zuzugreifen.
document.getElementByClassName()Es wird verwendet, um über das Klassennamensattribut auf die Elemente zuzugreifen.
document.forms()Es wird verwendet, um über ein HTML-Elementobjekt auf die Elemente zuzugreifen.

HTML-Elemente ändern

Methodenbeschreibung

document.write(text)Es wurde verwendet, um HTML-Ausdrücke in ein Dokument zu schreiben.
document.getElementById(id).innerHTMLFrüher konnte der Seiteninhalt geändert werden, ohne eine Seite zu aktualisieren.
document.getElementById(id).attributeEs wird verwendet, um das Attribut eines Elements zu ändern.
document.getElementById(id).style.attributeEs wurde verwendet, um den Stil eines Elements zu ändern.

Elemente hinzufügen und löschen

Methodenbeschreibung

document.createElement()Es wird zum Erstellen des Elements verwendet.
document.removeChild()Es wird verwendet, um das Element zu entfernen.
document.appendChild()Es wird verwendet, um das Element hinzuzufügen.
document.replaceChild()Es wird verwendet, um das Element zu ersetzen.

Event-Handler hinzufügen

  • document.getElementById(id).onclick=function(){code}: Wird verwendet, um Ereignisse im Code mithilfe des Ereignisses onclick() zu verarbeiten.

Methoden

Das Dokumentobjekt verfügt über folgende Methoden:

  • schreiben: Es wird verwendet, um HTML-Ausdrücke in ein Dokument zu schreiben.
  • writeln: Wird verwendet, um HTML-Ausdrücke mit Zeilenumbruchzeichen in ein Dokument zu schreiben.

Beispiel mit der Methode document.getElementById()

<!DOCTYPE html>
<head>

<script type="text/javascript">
	function getValue() {
		var a = document.getElementById("myexample");
		alert(a.innerHTML);

	}
</script>
</head>
<body>
	<h3 id="myexample" onclick="getValue()">click here</h3>
</body>
</html>
  • Im obigen Programm haben wir die Methode document.getElementById() verwendet und es ist daran gewöhnt
    Greifen Sie über das ID-Attribut auf die Elemente zu.
  • Die innerHTML-Eigenschaft wird verwendet, um den inneren HTML-Code des Elements festzulegen.
  • Wir verwenden das ID-Attribut myexample im Body-Tag und wann der Benutzer darauf klickt
    getValue()-Funktion, es wird eine Warnmeldung angezeigt.

Eigenschaften

Das Dokumentobjekt hat folgende Eigenschaften:

  • bgColor: Wird zum Ändern der Hintergrundfarbe verwendet.
  • zuletzt bearbeitet: Gibt das Datum an, an dem das Dokument zuletzt geändert wurde.
  • Referrer: Wird verwendet, um die URL der Seite anzugeben.
  • fgColor: Wird verwendet, um die Vordergrundfarbe (Text) zu ändern.

Beispiel für eine Dokumentobjekteigenschaft

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	var a;
	a=document.lastModified
	document.write("The page was last modified: "+a)
</script>
</body>
</html>
  • Im obigen Programm haben wir die Eigenschaft lastModified verwendet, die das Datum angibt, an dem das Dokument zuletzt geändert wurde.
  • document.write(“Die Seite wurde zuletzt geändert: „+a)“ In der Zeile werden Datum und Uhrzeit des Dokuments angezeigt.

JavaScript-Dokumentobjekt-Demo

  • Speichern Sie die Datei als doc_property.html in Ihrem System.
  • Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser.

Wenn der Ausführungsprozess erfolgreich abgeschlossen ist, erhalten wir die folgende Ausgabe:

JavaScript-Dokumentobjekt

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen