[JavaScript] getElementsByTagName.lengthの値が0になる

Question

前提・実現したいこと

JavaScriptを用いてwebページからtableタグの数を数えたいと思い、
var obj = document.getElementsByTagName('table');
として要素の取得を行いました。

発生している問題・エラーメッセージ

Chromeのデベロッパーツールで
console.log(obj);　で確認すると

HTMLCollection []
length :20
0: table
1: table
2: table
(中略)
19: table

のように取得はできているようなのですが、
console.log(obj.length);
とすると 0 が返ってきます。

該当のソースコード

var obj = document.getElementsByTagName('table');

console.log(obj);
console.log(obj.length);

どこが間違っているのでしょうか。

Comments

[miyabi_pudding]

HTMLも記載してください。

[退会済みユーザー]

objって変数名(?)を使いまわししていて、よその処理で上書きしていないかとか。

Answer 1

ページのロードが終わる前にJavaScriptが実行されているのかもしれません。
JavaScriptの実行時点ではDOMにtable要素が無いためlengthが0になっているのだと思われます。

実行時点の要素は以下のように確認できます。

var obj = document.getElementsByTagName('table');

console.log([...obj]);
console.log(obj.length);

ページのロードが終わってから実行したいのであれば以下のように DOMContentLoaded 後に実行されるようにイベントリスナーを追加しましょう。

window.addEventListener('DOMContentLoaded', () => {
  var obj = document.getElementsByTagName('table');

  console.log(obj);
  console.log(obj.length);
})

Comments

[yoshitoku]

ありがとうございます。教えていただいた方法で解決できました。
ページの始めの方でJavaScriptを実行していたのが原因だったようです。
実行順が影響してくることを完全に失念していたので、回答いただき本当に助かりました！