JavaScript Grundtutorials

JavaScript Objekt

JavaScript Funktion

JS HTML DOM

JS Browser BOM

AJAX Grundtutorials

JavaScript Referenzhandbuch

JS-DOM-Änderung des HTML-Inhalts JS-HTML-DOM-Methode

JS-HTML-DOM-Selektor

JavaScript wird am häufigsten verwendet, um den Inhalt oder den Wert von HTML-Elementen zu erhalten oder zu ändern und bestimmte Effekte anzuwenden.

Dazu müssen Sie zunächst das Element finden. Dies kann auf viele verschiedene Weisen geschehen:

HTML-Elemente durch das ID finden
HTML-Elemente durch das Tagnamen finden
通过类名称查找HTML元素
通过CSS选择器查找HTML元素
通过HTML对象集合查找HTML元素

HTML-Elemente durch das ID finden

Sie könnengetElementById()Diese Methode wählt Elemente durch das einzigartige ID aus.

Dies ist die einfachste Methode, um HTML-Elemente im DOM-Baum zu finden.

Nachfolgender Beispiel wählt ein Element mit dem Attribut IDid="msg"der Elemente:

示例

var x = document.getElementById("msg");

测试看看‹/›

Wenn das Element gefunden wird, gibt diese Methode das Element als Objekt zurück.

Wenn das Element nicht gefunden wird, enthält myElement null.

HTML-Elemente durch das Tagnamen finden

Sie können auchgetElementsByTagName()Diese Methode wählt HTML-Elemente durch das Markennamen aus.

Diese Methode gibt eine Liste von Elementen ähnlich einem Array zurück, die im Dokument mit dem angegebenen Tagnamen vorhanden sind.

In diesem Beispiel wird<p>Element:

示例

var x = document.getElementsByTagName("p");

测试看看‹/›

Ändern Sie den Hintergrundfarbe aller Absatzelemente im Dokument:

示例

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

测试看看‹/›

In diesem Beispiel wirdid="wrapper"der Elemente, dann wählen"wrapper"alle<p>Element:

示例

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

测试看看‹/›

通过类名称查找HTML元素

您可以使用该getElementsByClassName()方法选择具有特定类名称的所有元素。

此方法返回具有指定类名的文档中所有元素的类似数组的列表。

此示例返回所有带有class="demo"的元素的列表：

示例

var　x　=　document.getElementsByClassName("demo");

测试看看‹/›

通过CSS选择器查找HTML元素

您可以使用该querySelectorAll()方法来选择与指定的CSS选择器匹配的元素（ID，类，类型等）。

此方法返回与指定选择器匹配的所有元素的类似数组的列表。

CSS选择器提供了一种非常强大有效的选择文档中HTML元素的方法。

示例

var　x　=　document.querySelectorAll("div");

测试看看‹/›

此示例返回带有“ note”类的文档中所有<div>元素的列表：

示例

var　x　=　document.querySelectorAll("div.note");

测试看看‹/›

通过HTML对象集合查找HTML元素

HTML文档中最顶层的元素可以直接用作文档属性。

例如，可以使用属性访问<html>Elementdocument.documentElement。

所述元件可以与被访问document.body属性。

示例

var　html　=　document.documentElement;
var　body　=　document.body;

测试看看‹/›

注意：如果document.body在标记之前使用（例如，在在<head>内），它将返回null而不是body元素。

也可以访问以下HTML对象（和对象集合）：

属性	描述
document.anchors	返回所有具有名称属性的<a>Element
document.applets	Rückgabe aller<applet>Element（在HTML5（已弃用）
document.baseURI	返回文档的绝对基本URI
document.body	RückgabeElement
document.cookie	返回文档的cookie
document.doctype	返回文档的文档类型
document.documentElement	Rückgabe<html>Element
document.documentMode	返回浏览器使用的模式
document.documentURI	返回文档的URI
document.domain	Rückgabe des Domänennamens des Dokumentservers
document.domConfig	Veraltet;Rückgabe der DOM-Konfiguration
document.embeds	Rückgabe aller<embed>Element
document.forms	Rückgabe aller<form>Element
document.head	Rückgabe<head>Element
document.images	Rückgabe aller<img>Element
document.implementation	Rückgabe der DOM-Implementierung
document.inputEncoding	Rückgabe der Kodierung (Zeichensatz) des Dokuments
document.lastModified	Rückgabe des Datums und der Uhrzeit der Aktualisierung des Dokuments
document.links	Rückgabe aller mit href-Attribut<area>und<a>Element
document.readyState	Rückgabe des (laden) Zustands des Dokuments
document.referrer	Rückgabe der URI des Verweisers (verknüpfte Dokumente)
document.scripts	Rückgabe aller<script>Element
document.strictErrorChecking	Rückgabe, ob eine strenge Fehlerprüfung durchgeführt wird
document.title	Rückgabe<title>Element
document.URL	Rückgabe der vollständigen URL des Dokuments

JS-DOM-Änderung des HTML-Inhalts JS-HTML-DOM-Methode