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()	是	是	是	是	是

打印页面