タグ名による要素の選択

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.dokyumento.jp/">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.dokyumento.jp/
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.dokyumento.jp/
https://openjsf.org/Code language: JavaScript (javascript)

このチュートリアルは役に立ちましたか？