Heim > Artikel > Web-Frontend > Beispielcode für die Verwendung von HTML DOM für den Zugriff auf JavaScript-Dokumentelemente
Beispielcode für die Verwendung von HTML DOM für den Zugriff auf JavaScript-Dokumentelemente
- 零下一度Original
- 2017-05-05 11:51:391652Durchsuche
Über das HTML-DOM können Sie auf alle Elemente des JavaScript-HTML-Dokuments zugreifen.
HTML DOM (Document Object Model)
Wenn eine Webseite geladen wird, erstellt der Browser das Document Object Model der Seite (Document Object Modell).
Das HTML-DOM-Modell ist als Baum von Objekten aufgebaut.
HTML-DOM-Baum
Durch das programmierbare Objektmodell erhält JavaScript genügend Leistung, um dynamisches HTML zu erstellen.
JavaScript kann alle HTML-Elemente auf der Seite ändern
JavaScript kann alle HTML-Attribute auf der Seite ändern
JavaScript kann alle CSS-Stile auf der Seite ändern
JavaScript kann auf alle Ereignisse auf der Seite reagieren
HTML-Elemente finden
Normalerweise müssen Sie mit JavaScript HTML-Elemente manipulieren.
Dazu müssen Sie zunächst das Element finden. Dafür gibt es drei Möglichkeiten:
HTML-Element anhand der ID suchen
HTML-Element anhand des Tag-Namens suchen
HTML-Element anhand des Klassennamens suchen
HTML-Elemente anhand der ID finden
Der einfachste Weg, HTML-Elemente im DOM zu finden, ist die Verwendung der ID des Elements.
Instanz
In diesem Beispiel wird nach dem Element mit der ID="intro" gesucht:
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p id="intro">hello</p>
<p>本例演示 <strong>getElementById</strong> 方法</p>
<script>
x = document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>
</body>
</html>Wenn das Element gefunden wird, hat die Methode die Form einer Objekt (in x) Gibt das Element zurück.
Wenn das Element nicht gefunden wird, enthält x null.
HTML-Element nach Tag-Namen suchen
Beispiel
Dieses Beispiel findet das Element mit der ID="main" und findet dann alle e388a4556c0f65e1904146cc1a846bee-Elemente in "main". :
[html] view plain copy
<html xmlns=www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x = document.getElementById("main");
var y = document.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段落文本是：' + y[0].innerHTML);
</script>
</body>
</html>Das Suchen von HTML-Elementen anhand des Klassennamens funktioniert in IE 5,6,7,8 nicht.
[Verwandte Empfehlungen]
1. Kostenloses HTML-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von HTML DOM für den Zugriff auf JavaScript-Dokumentelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!