首頁 > 文章 > web前端 > js中document物件介紹

js中document物件介紹

PHPz原創: 2024-02-18 13:06:07622瀏覽

js中document物件介紹

JavaScript中Document物件介紹及程式碼範例

引言：
在JavaScript中，Document物件是代表整個HTML文件的接口，它提供了對HTML文件的存取和操作方法。本文將介紹Document物件的常用方法和屬性，並提供一些具體的程式碼範例。

getElementById方法
getElementById是Document物件的重要方法，用於根據指定元素的id屬性取得對應的元素節點。可以透過修改元素節點的屬性或內容來實現對頁面的動態變更。以下是一個具體的程式碼範例：

<html>
<body>
  <h1 id="myHeading">Hello, World!</h1>
  <script>
    var heading = document.getElementById("myHeading");
    heading.innerHTML = "Hello, JavaScript!";
  </script>
</body>
</html>

在上述程式碼中，透過getElementById方法取得id為"myHeading"的元素節點，並使用innerHTML屬性將其內容變更為"Hello, JavaScript! "。

getElementsByTagName方法
getElementsByTagName方法用於取得指定標籤名稱的所有元素節點，並傳回一個NodeList物件。可以使用NodeList物件的length屬性取得匹配元素的個數，並透過索引存取每個元素。以下是一個範例程式碼：

<html>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <script>
    var listItems = document.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++) {
      listItems[i].style.color = "red";
    }
  </script>
</body>
</html>

在上述程式碼中，透過getElementsByTagName方法取得所有li元素節點，並透過for迴圈將每個li元素的文字顏色變更為紅色。

createElement和appendChild方法
createElement方法用於建立新的元素節點，而appendChild方法則將新的元素節點新增至指定的父節點。以下是一個範例程式碼：

<html>
<body>
  <div id="myDiv"></div>
  <script>
    var newElement = document.createElement("p");
    newElement.innerHTML = "This is a new paragraph.";
    document.getElementById("myDiv").appendChild(newElement);
  </script>
</body>
</html>

在上述程式碼中，透過createElement方法建立了一個新的p元素節點，並使用appendChild方法將其新增至id為"myDiv"的div元素中。

總結：
本文介紹了JavaScript中Document物件的一些常用方法和屬性，包括getElementById、getElementsByTagName、createElement和appendChild。透過這些方法和屬性，可以方便地存取和操作HTML文件的元素節點。希望本文提供的程式碼範例對於學習和使用JavaScript的讀者有所幫助。

以上是js中document物件介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html for 循环接口 Length JS 对象 innerHTML li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用JavaScript中return關鍵字下一篇：使用JavaScript中return關鍵字

看更多