Wie bekomme ich Dom-Elemente in js? In diesem Artikel wird Ihnen die Methode zur Verwendung von JS zum Suchen und Abrufen von Elementobjekten über DOM vorgestellt, damit Sie verstehen, was DOM in JS ist und wie Sie Elemente über DOM finden und abrufen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Lassen Sie uns zunächst kurz verstehen, Was ist Dom in js?
dom: HTML DOM, kurz für Document Object Model. Wenn eine Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite.
Normalerweise müssen wir HTML-Elemente über JavaScript manipulieren. Dazu müssen Sie zunächst das Element finden und erhalten. Lassen Sie uns drei gängige Methoden vorstellen, um das Elementobjekt über dom in JavaScript zu finden und abzurufen:
1. Suchen und erhalten Sie das Element anhand der ID: getElementById()
getElementById()-Methode: Ruft das Knotenelement anhand der ID ab. Wenn die Seite mehrere Knotenobjekte mit derselben ID enthält, wird nur das erste Knotenobjekt zurückgegeben.
Syntax:
document.getElementById("元素的id");Codebeispiel: Klicken Sie auf das Feld „id="box" und es erscheint ein Popup-Fenster mit dem Inhalt des Felds „id="box"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box" onclick="getValue()">我是测试代码</div>
<script>
function getValue(){
var x=document.getElementById("box")
alert(x.innerHTML)
}
</script>
</body>
</html>Rendering:
Hinweis: Es ist nicht erforderlich, „#“ vor den getElementById()-Klammern hinzuzufügen, da die Methode bestimmt, dass die Der Wert in den Klammern ist die ID eines Elementwerts. Diese Methode gibt ein DOM-Objekt zurück.
2. Elemente nach Tag-Namen suchen und abrufen: getElementsByTagName()
getElementsByTagName()-Methode: Suchen und erhalten Sie eine Reihe von Elementen anhand des Tag-Namens des Elements Objekte (so viele wie vorhanden abrufen), wodurch eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurückgegeben wird.
Syntax:
 "153923382790633Wie bekomme ich Dom-Elemente in js? js-Methode zum Suchen und Abrufen von Elementobjekten über dom (Codebeispiel)")
document.getElementsByClassName("元素的标签名");Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>Rendering:
3. Durch die Klasse ( Klasse) Suchen und Abrufen von Elementen: getElementsByClassName()
getElementsByClassName()-Methode: Suchen und Abrufen von Elementen über den angegebenen Attributwert der Klasse (Klasse) und Zurückgeben der Sammlung von Elementen des Klassennamens Man kann sagen, dass es sich um eine Sammlung von Objekten handelt.
Syntax:
 "153923504791804Wie bekomme ich Dom-Elemente in js? js-Methode zum Suchen und Abrufen von Elementobjekten über dom (Codebeispiel)")
document.getElementsByClassName("元素的class");Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="main">
<p class="a">我是测试代码1</p>
<p class="a">我是测试代码2</p>
</div>
<script>
var x = document.getElementById("main");
var y = x.getElementsByClassName("a");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>Rendering:
Zusammenfassung: Das war's für diesen Artikel Ich hoffe, dass der gesamte Inhalt für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!
Verwandte Empfehlungen:
PHP-Video-Tutorial zum öffentlichen Wohlfahrtstraining
Das obige ist der detaillierte Inhalt vonWie bekomme ich Dom-Elemente in js? js-Methode zum Suchen und Abrufen von Elementobjekten über dom (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
