Beispielcode für die Verwendung von HTML DOM für den Zugriff auf JavaScript-Dokumentelemente-HTML-Tutorial-php.cn

Beispielcode für die Verwendung von HTML DOM für den Zugriff auf JavaScript-Dokumentelemente

零下一度

Freigeben： 2017-05-05 11:51:39

Original

1593 Leute haben es durchsucht

Ü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(&#39;<p>id="intro" 的段落中的文本是：&#39; + x.innerHTML + &#39;</p>&#39;);  
</script>  
</body>  
</html>

Nach dem Login kopieren

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

-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(&#39;id 为 "main" 的 div 中的第一段落文本是：&#39; + y[0].innerHTML);  
</script>  
</body>  
</html>

Nach dem Login kopieren

Das Suchen von HTML-Elementen anhand des Klassennamens funktioniert in IE 5,6,7,8 nicht.

[Verwandte Empfehlungen]

1. Kostenloses HTML-Online-Video-Tutorial

2. HTML-Entwicklungshandbuch

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!