jsでhtmlcollectionからタグの要素を取り出す方法

Question

実現したいこと

JavaScriptで
getElementsByTagname で取得した値が
htmlcollectionになる、ということは分かったのですが、
getElementByIdで取得した時のようにelement要素にしたいです。

前提

html側にidをつけるのは出来ないということにしてください。
mainタグの中にあるaタグを全て取り出したいので、配列に変換するのは違うのかなと思っています。（うまく扱えませんでした）

Answer 1

HTMLCollection は配列と同じように扱えます。[] で個々の要素にアクセスできますし、for of もできます。

const anchors = main.getElementsByTagName('a');
for (let i = 0; i < anchors.length; ++i) {
  // anchors[i] が <a> 要素
}

for (const a of anchors) {
   // 変数 a が <a> 要素
}

Comments

[nununu0000]

ありがとうございます。
main.getElementByTagNameの箇所が
main.getElementByTagName is not a functionとエラーになっています…
mainタグはhtml側にあるのですが、使えないのでしょうか。

[int32_t]

getElementByTagName ではなく getElementsByTagName でしょう。
また、変数 main も適切に値を入れておく必要があります。

[nununu0000]

const anchors = main.getElementsByTagName('a');
の前にmainに対して何らかの処理が必要なのでしょうか？
何を調べたら良いのかの検討もついていないので、お手数ですが検索ワードなどありましたら教えてください。

[int32_t]

やりたいことが「mainタグの中にあるaタグを全て取り出したい」なら、
const main = document.getElementsByTagName('main')[0];
const anchors = main.getElementsByTagName('a');
などです。

また、そもそも getElementsByTagName() を使わずに
const anchors = document.querySelectorAll('main a');
の方が簡単ですね。

[nununu0000]

const anchors = document.querySelectorAll('main a');
で出来ました！！
ご丁寧にありがとうございました。

Answer 2

n番目の要素をelements[n]で参照すればよいでしょう