JavaScript教程-`document.getElementsByTagName()`

document.getElementsByTagName() 方法返回所有具有指定标签名的元素。

getElementsByTagName() 方法的语法如下：

document.getElementsByTagName("name")

这里，name 是必需的参数，表示要获取的标签名称。

document.getElementsByTagName() 方法示例

在这个示例中，我们将计算文档中使用的段落总数。为了实现这一目的，我们调用了 document.getElementsByTagName("p") 方法来获取所有段落元素。

<script type="text/javascript">
function countpara() {
  var totalpara = document.getElementsByTagName("p");
  alert("Total p tags are: " + totalpara.length);
}
</script>
<p>This is a paragraph</p>
<p>Here we are going to count total number of paragraphs by getElementByTagName() method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">Count Paragraph</button>

在这个示例中，我们有三个段落标签。通过点击按钮，我们将使用 getElementsByTagName() 方法获取所有 p 标签，并计算它们的总数。然后，弹出对话框显示段落总数。

另一个 document.getElementsByTagName() 方法示例

在这个示例中，我们将计算文档中使用的 h2 和 h3 标签的总数。

<script type="text/javascript">
function counth2() {
  var totalh2 = document.getElementsByTagName("h2");
  alert("Total h2 tags are: " + totalh2.length);
}

function counth3() {
  var totalh3 = document.getElementsByTagName("h3");
  alert("Total h3 tags are: " + totalh3.length);
}
</script>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<button onclick="counth2()">Count h2</button>
<button onclick="counth3()">Count h3</button>

在这个示例中，我们有两个 h2 标签和三个 h3 标签。通过点击按钮，我们将使用 getElementsByTagName() 方法获取所有 h2 或 h3 标签，并计算它们的总数。然后，弹出对话框分别显示 h2 和 h3 标签的总数。

注意：在此示例中，输出可能与此页面上显示的示例输出不同，因为它将计算本文档中使用的 p 标签、h2 标签和 h3 标签的总数。