JavaScript HTML DOM 元素

本章向您講解如何查找和訪問 HTML 頁面中的 HTML 元素。

查找 HTML 元素

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

為了達成此目的，您需要首先找到這些元素。有好幾種完成此任務的方法：

  • 通過 id 查找 HTML 元素
  • 通過標簽名查找 HTML 元素
  • 通過類名查找 HTML 元素
  • 通過 CSS 選擇器查找 HTML 元素
  • 通過 HTML 對象集合查找 HTML 元素

通過 id 查找 HTML 元素

DOM 中查找 HTML 元素最簡單的方法是，使用元素的 id。

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

實例

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

親自試一試

如果元素被找到，此方法會以對象返回該元素（在 myElement 中）。

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

通過標簽名查找 HTML 元素

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

實例

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

親自試一試

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

實例

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

親自試一試

通過類名查找 HTML 元素

如果您需要找到擁有相同類名的所有 HTML 元素，請使用 getElementsByClassName()。

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

實例

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

親自試一試

通過類名查找元素不適用于 Internet Explorer 8 及其更早版本。

通過 CSS 選擇器查找 HTML 元素

如果您需要查找匹配指定 CSS 選擇器（id、類名、類型、屬性、屬性值等等）的所有 HTML 元素，請使用 querySelectorAll() 方法。

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

實例

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

親自試一試

querySelectorAll() 不適用于 Internet Explorer 8 及其更早版本。

通過 HTML 對象選擇器查找 HTML 對象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后顯示所有元素值：

實例

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;

親自試一試

以下 HTML 對象（和對象集合）也是可訪問的：