Heim > Artikel > Web-Frontend > Eine kurze Einführung in die JavaScript-Unterstützung für das traditionelle Dokumentobjektmodell_Grundkenntnisse

Eine kurze Einführung in die JavaScript-Unterstützung für das traditionelle Dokumentobjektmodell_Grundkenntnisse

WBOYOriginal: 2016-05-16 15:54:39939Durchsuche

Dies ist das Modell, das in früheren Versionen der JavaScript-Sprache eingeführt wurde. Alle werden von allen Browsern unterstützt, ermöglichen jedoch nur den Zugriff auf bestimmte Schlüsselteile der Datei, wie z. B. Formulare, Formularelemente und Bilder.

Dieses Modell bietet mehrere schreibgeschützte Eigenschaften wie Titel, URL und letzte Änderung, die Informationen über das Dokument als Ganzes liefern. Darüber hinaus bietet dieses Modell verschiedene Methoden, mit denen Eigenschaftswerte des Dokuments festgelegt und abgerufen werden können.
Dokumenteigenschaften im traditionellen DOM:

Das Folgende ist eine Liste von Dokumenteigenschaften, auf die über herkömmliches DOM zugegriffen werden kann:

2015616103205974.jpg (662×762)

2015616103233946.jpg (655×726)

Dokumentmethode im traditionellen DOM:

Hier ist eine Liste der vom traditionellen DOM unterstützten Methoden:

2015616103255189.jpg (681×498)

Beispiel:

Mit HTML DOM können wir jedes HTML-Element und jedes HTML-Dokument finden. Wenn beispielsweise ein Webdokument ein Formularelement enthält, können wir es mithilfe von JavaScript document.forms[0] nennen. Wenn ein Webdokument zwei Formularelemente enthält, heißt das erste Formular document.forms[0] und das zweite document.forms[1].

Mit der oben angegebenen hierarchischen Struktur und den oben angegebenen Eigenschaften können Sie document.forms[0].elements[0] usw. verwenden.

Hier ist ein Beispiel für den Zugriff auf Dokumenteigenschaften mit herkömmlichen DOM-Methoden:

<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
  var ret = document.title;
  alert("Document Title : " + ret );

  var ret = document.URL;
  alert("Document URL : " + ret );

  var ret = document.forms[0];
  alert("Document First Form : " + ret );

  var ret = document.forms[0].elements[1];
  alert("Second element : " + ret );

}
//-->
</script>
</head>
<body>
<h1 id="title">This is main title</h1>
<p>Click the following to see the result:</p>

<form name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>

<form name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

HINWEIS: Dieses Beispiel gibt Objekte wie Form und Inhalt zurück, und wir müssen Eigenschaften dieser Objekte verwenden, die in diesem Tutorial nicht behandelt werden, um auf ihre Werte zuzugreifen.

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

Vorheriger Artikel：So verwenden Sie AngularJS zum Implementieren der HTML-Seitenschachtelung_AngularJSNächster Artikel：So verwenden Sie AngularJS zum Implementieren der HTML-Seitenschachtelung_AngularJS

In Verbindung stehende Artikel

Mehr sehen