HTML - DOM getElementsByTagName() 方法

HTML DOM 的getElementsByTagName() 方法是一個只讀方法，用於檢索文件中所有具有指定標籤名稱的元素的即時 HTMLCollection。如果文件中不存在指定的標籤，則返回一個空的 HTMLCollection，而不是 null。

如果將星號 (*) 作為引數傳遞給此方法，它將選擇文件中的所有元素，並返回包含所有這些元素的 HTMLCollection。

以下互動式示例演示了getElementsByTagName() 方法在不同場景中的用法：

DOM getElementsByTagName() 方法 - 技術教學

歡迎來到 Tutorialspoint

您來對地方了，開始學習吧…… 點選瞭解更多

如果單擊“更改內容”按鈕，它將把第一段的內容更改為“內容更改為 Tutorialspoint”。
如果單擊“新增樣式”按鈕，它將為第二段應用樣式，將背景顏色更改為“白色”，文字顏色更改為“綠色”。

語法

以下是 HTML DOM getElementsByTagName() 方法的語法：

document.getElementsByTagName(tagname);

引數

此方法接受如下所示的單個引數：

引數	描述
tagname	它表示我們要檢索的元素的名稱。

返回值

它返回由指定的 tagname 找到的元素的 HTMLCollection。

示例 1

以下程式演示了 HTML DOM getElementsByTagName() 方法的用法：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
       padding: 8px 20px;
   }
   span{
       position: relative;
       top: 10px;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to add style to the "span" element.</p>
<button onclick="fun()">Click me</button>
<br>
<span id="type">You are at the right place to learn.</span>
<script>
   function fun() {
      let x = document.getElementsByTagName("span");
      x[0].innerHTML = "Welcome to Tutorials Point..";
      x[0].style.color = "white";
      x[0].style.backgroundColor = "#04af2f";
   }
</script>
</body>
</html>

以上程式顯示了一個帶有某些樣式的“span”元素：

示例 2：更改文件的背景顏色

在此示例中，我們將使用 HTML DOM getElementsByTagName() 方法以及“style”屬性更改 HTML 文件的背景顏色：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
       padding: 8px 20px;
   }
</style>
</head>
<body>
<span id="type">You are at the right place to learn.</span>
<p>You can go through our Tutorials.</p>
<p>Click on the below button to change background-color of HTML Document</p>
<button onclick="fun()">Click me</button>
<br>
<script>
   function fun() {
      let x = document.getElementsByTagName("body");
      x[0].style.backgroundColor = "#04af2f";
      x[0].style.color = "white";
   }
</script>
</body>
</html>

程式執行後，將顯示一個按鈕。單擊時，文件的背景顏色將更改為“綠色”：

示例 3：獲取所有標籤的列表

在以下示例中，我們使用 HTML DOM getElementsByTagName() 方法透過傳遞星號 (“*”) 作為引數來檢索所有元素，並迴圈遍歷它以顯示 HTML 文件中使用的所有元素的列表：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
      padding: 8px 20px;
   }
</style>
</head>
<body>
<p>Click on the below button to get the list of all the Element used in this document:</p>
<button onclick="fun()">Click me</button>
<p id="list"></p>
<script>
   function fun() {
      let x = document.getElementsByTagName("*");
      let text = "";
      for (let i = 0; i < x.length; i++) {
         text += x[i].tagName + "<br>";
      }
      document.getElementById("list").innerHTML = "List of all element: <br>" + text;
   }
</script>
</body>
</html>

執行上述程式後，將顯示所有元素的列表：

示例 4：更改元素的內容

在此示例中，我們將更改元素內編寫的文字：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
      padding: 8px 20px;
   }
</style>
</head>
<body>
<span id="type"> You are at the right place to learn.</span>
<p>Click the below button to change the content of the first paragraph (first p).</p>
<button onclick="fun()">Click me</button><br>
<p>I am Paragraph 1.</p>
<p>I am Paragraph 2.</p>
<script>
   function fun() {
      let x = document.getElementsByTagName("p");
      x[0].innerHTML = "Welcome to Tutorials Point..";
   }
</script>
</body>
</html>

執行程式後，將出現一個按鈕。單擊該按鈕會將“p”元素的內容更改為“歡迎來到 Tutorials Point”：

示例 5：獲取元素的數量

以下示例返回文件中元素的數量：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
</head>
<body>
<span id="type"> You are at the right place to learn.</span>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p id="num"></p>
<script>
   function fun() {
       let x = document.getElementsByTagName("p").length;
       document.getElementById("num").innerHTML = "Total 'p' Elements: " + x;
   }
   fun();
</script>
</body>
</html>

執行上述程式後，將顯示元素的數量：