JavaScript HTML DOM Elemente

本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有多种方法可以完成此任务：

  • 通过 id 查找 HTML 元素
  • 通过标签名查找 HTML 元素
  • 通过类名查找 HTML 元素
  • 通过 CSS 选择器查找 HTML 元素
  • 通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素：

Beispiel

var myElement = document.getElementById("intro");

Versuchen Sie es selbst

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

如果未找到元素，myElement 将包含 null。

通过标签名查找 HTML 元素

本例查找所有 <p> 元素：

Beispiel

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

Versuchen Sie es selbst

本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：

Beispiel

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

Versuchen Sie es selbst

通过类名查找 HTML 元素

如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

本例返回包含 class="intro" 的所有元素的列表：

Beispiel

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

Versuchen Sie es selbst

此方法不适用于 Internet Explorer 8 及其更早版本。

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回所有 class="intro" 的元素： <p> 元素列表：

Beispiel

var x = document.querySelectorAll("p.intro");

Versuchen Sie es selbst

querySelectorAll() 此功能不适用于 Internet Explorer 8 及其更早版本。

Durch den HTML-Objekt-Selektor wird nach HTML-Objekten gesucht

Dieses Beispiel sucht nach dem Formular-Element mit id="frm1" in der forms-Kollektion und zeigt alle Elementwerte an:

Beispiel

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Versuchen Sie es selbst

Nachfolgende HTML-Objekte (und Objekt-Listen) sind ebenfalls zugänglich: