最新的Web開發教程
 

JavaScript HTML DOM元素

❮上一頁 下一頁章❯

此頁面教你如何查找和在HTML頁面訪問HTML元素。

查找HTML元素

通常情況下，使用JavaScript，您要處理的HTML元素。

要做到這一點，你必須先找到的元素。 有幾個方法可以做到這一點：

  • 通過查找HTML元素的id
  • 查找標記名稱的HTML元素
  • 通過查找HTML元素class名
  • 通過查找CSS選擇HTML元素
  • 通過查找HTML對象的集合HTML元素

通過查找HTML元素Id

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

這個例子中找到與元素id="intro" ：

例

var myElement = document.getElementById("intro");
試一試»

如果找到元素，該方法將返回元件作為對象（在myElement ）。

如果沒有找到該元素， myElement將包含空。

尋找按標記名稱的HTML元素

這個例子查找所有<p>元素：

例

var x = document.getElementsByTagName("p");
試一試»

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

例

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

通過查找HTML元素Class名稱

如果你想找到具有相同的所有HTML元素class名稱，使用getElementsByClassName()

此示例返回所有元素的列表class="intro" 。

例

var x = document.getElementsByClassName("intro");
試一試»

按類名查找元素不會在Internet Explorer 8和更早版本。

通過查找CSS選擇HTML元素

如果你想找到一個指定CSS選擇器匹配（所有的HTML元素id ，類名稱，類型，屬性，屬性值等），使用querySelectorAll()方法。

這個例子返回所有清單<p>與要素class="intro" 。

例

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

該querySelectorAll()方法不會在Internet Explorer 8和更早版本。

通過查找HTML對象集合HTML元素

這個例子中找到與表單元素id="frm1"在形式收集，並顯示所有的元素值：

例

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對象（對象集合）也可以訪問：

自測練習用！

練習1» 練習2» 練習3» 練習4» 練習5»


❮上一頁 下一頁章❯