按标签名选择元素 - JavaScript 教程

要按标签名（例如 div、p、span、a、ul）选择元素，请使用 Element.getElementsByTagName() 方法

let elements = element.getElementsByTagName(tagName)Code language: JavaScript (javascript)

getElementsByTagName() 方法返回一个包含具有给定标签名的元素的动态 HTMLCollection。

以下是包含一些元素的 HTML 文档

<html>
<head>
  <title>JavaScript getElementsByTagName() example</title>
</head>
<body>

  <div id="container">
    <a href="https://node.org.cn/">Node.js</a>
    <a href="https://openjsf.org/">OpenJS Foundation</a>
  </div>
  <a href="https://github.com/tc39">Ecma TC39</a>

  <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

以下代码显示了链接的数量及其 href 属性

let links = document.getElementsByTagName('a');

// return the number of links
console.log('Link Count:', links.length);

// show the href of links
for (let i = 0; i < links.length; i++) {
    console.log(links[i].href);
}Code language: JavaScript (javascript)

输出

Link Count: 3
https://node.org.cn/
https://openjsf.org/
https://github.com/tc39
Code language: JavaScript (javascript)

要获取元素内部的链接元素，请先选择容器元素，然后对选定的元素调用 getElementsByTagName() 方法

const container = document.getElementById('container');

const links = container.getElementsByTagName('a');

for (let i = 0; i < links.length; i++) {
    console.log(links[i].href);
}Code language: JavaScript (javascript)

输出

https://node.org.cn/
https://openjsf.org/Code language: JavaScript (javascript)

本教程对您有帮助吗？