suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JavaScript-Unterstützung für W3C-DOM-Vorlagen_Grundkenntnisse

Detaillierte Erläuterung der JavaScript-Unterstützung für W3C-DOM-Vorlagen_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 15:54:331225Durchsuche

Dieses Dokumentobjektmodell ermöglicht den Zugriff auf alle Dokumentinhalte und -änderungen, wie vom World Wide Web Consortium (W3C) spezifiziert. Fast alle modernen Browser unterstützen diesen Modus.

Die W3C-DOM-Spezifikation enthält die meisten Funktionen des traditionellen DOM, fügt aber auch neue und wichtige Funktionen hinzu. Zusätzlich zur Unterstützung von Formularen[ ], Bildern[ ] und anderen Array-Eigenschaften des Dokumentobjekts definiert es Methoden, die es Skripten ermöglichen, auf jedes Dokumentelement zuzugreifen und es zu bearbeiten, nicht nur auf spezielle Elemente wie Formulare und Bilder.
Dokumenteigenschaften im W3C DOM:

Dieses Modell unterstützt alle vom herkömmlichen DOM bereitgestellten Eigenschaften. Darüber hinaus finden Sie hier eine Liste der Dokumenteigenschaften, auf die über das W3C-DOM zugegriffen werden kann:

2015616110345962.jpg (684×368)

Dokumentmethoden im W3C DOM:

Dieses Modell unterstützt alle vom traditionellen DOM bereitgestellten Methoden. Darüber hinaus finden Sie hier eine Liste der vom W3C DOM unterstützten Methoden:

2015616110407101.jpg (655×753)

2015616110427713.jpg (674×348)

Beispiel:

Es ist einfach, Elemente mithilfe von W3C-DOM-Dokumenten zu manipulieren (auf sie zuzugreifen und sie festzulegen). Sie können jede Methode wie getElementById, getElementsByName, orgetElementsByTagName verwenden.

Hier ist ein Beispiel für den Zugriff auf Dokumenteigenschaften mithilfe von W3C-DOM-Methoden: 

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

 var ret = document.getElementById("heading");
 alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id="heading">This is main title</h1>
<p>Click the following to see the result:</p>

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

<form d="form2" 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：Methode zum dynamischen Laden von jQuery_jqueryNächster Artikel：Methode zum dynamischen Laden von jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen