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>

执行上述程序后，将显示元素的数量：