HTML - DOM 元素 getElementsByTagName() 方法

HTML DOM 元素**getElementsByTagName()** 方法檢索與指定標籤名稱匹配的元素的即時 HTMLCollection。它返回與指定標籤名稱匹配的元素的 HTMLCollection。

標籤名稱“*”返回所有子元素。

語法

element.getElementsByTagName(tagname)

引數

引數	描述
tagname	指定要檢索的元素的標籤名稱的字串。

返回值

返回一個 HTMLCollection 物件，其中包含具有指定標籤名稱的元素集合。

HTML DOM 元素 getElementsByTagName() 方法示例

以下是展示如何在 JavaScript 中使用 getElementsByTagName() 透過其標籤名稱選擇和操作網頁上元素的實用示例。

更改段落的文字顏色

此示例使用 getElementsByTagName('p') 選擇文件中的所有**<p>** 元素，並在每次單擊段落時使用 Javascript 更改其文字顏色。

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Change Paragraph Color on Click</title>
  <style>
    p {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="instructions">
    Click any paragraph to change its color:
  </div>
  <p>Click me to change color</p>
  <p>Click me to change color</p>
  <p>Click me to change color</p>
  
  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      const paragraphs = 
      document.getElementsByTagName('p');
      for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].addEventListener('click',function()
        {
          const colors = ['red', 'blue'];
          const color = 
          colors
          [Math.floor(Math.random() * colors.length)];
          this.style.color = color;
        });
      }
    });
  </script>
</body>

</html>

更改 Div 元素的背景顏色

此示例選擇所有**<div>** 標籤並動態操作它們，在每次單擊時更改其背景顏色。

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    Change Div Background Color
  </title>
</head>

<body>
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <button onclick=
  "changeColor()">Change Color</button>
  
  <script>
    // Array of colors to cycle through
    const colors = 
    ['lightblue', 'lightgreen','lightpink'];

    function changeColor() {
      const divs = document.getElementsByTagName('div');
      for (let i = 0; i < divs.length; i++) {
      // Assign a color from the array based on the index
        divs[i].style.backgroundColor = 
        colors[i % colors.length];
      }
    }
  </script>
</body>

</html>

動態更新內容

在這裡，getElementsByTagName('span') 選擇 HTML 頁面上的所有**<span>** 元素。每個<span> 元素的文字內容在單擊時透過向其新增事件偵聽器動態更新。

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    Dynamically Updating Content
  </title>
  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      const spans = 
      document.getElementsByTagName('span');
      for (let i = 0; i < spans.length; i++) 
      {
        spans[i].addEventListener
        ('click', function() {
          this.textContent = 'Clicked!';
        });
      }
    });
  </script>
</head>

<body>
  <p>Hit the Span!</p>
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</body>

</html>

動態更新列表項

此示例演示瞭如何在使用者單擊按鈕以使用 getElementsByTagName() 方法更新顯示的列表項時動態更新 HTML 中的內容。

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Update List Items</title>
</head>

<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button onclick=
  "updateListItems()">Update Items</button>
  
  <script>
    function updateListItems() {
      const items = 
      document.getElementsByTagName('li');
      for (let i = 0; i < items.length; i++)
       {
        items[i].textContent = 
        `Updated Item ${i + 1}`;
      }
    }
  </script>
</body>

</html>

支援的瀏覽器

方法
getElementsByTagName()	是	是	是	是	是

列印頁面