getElementsByClassNameで要素が取得できない。

Question

Chrome拡張機能によって、あるページに設置されている以下のようなsubmitボタンを取得しようとしています。
![

デベロッパーツールでこのボタンについて調べると、以下の通りです。

そこで、content_scriptsのjsファイルには以下のコードを記述しました。

var subButton=document.getElementsByClassName("btn-primary")[0];
        if(subButton.length){
            console.log("subButtonは存在します");
        }

しかしコンソールには以下のようなエラーメッセージが返ってきてしまいました。

(22行目とありますが、上記コードの2行目に該当します)

---

※btn-primary要素がこれの前に2つ存在しますが、
その1つ目が以下のようにCSSのクラス名(?)を指定しているコードであり、

2つ目が以下のようにコメントアウトされた領域で使用されているため、getElementsByClassNameにおいて[0]で指定しています。

念の為に[1]や[2]でも試しましたが、いずれの場合でも同様のエラーメッセージとなりました。

---

（またcontent_scriptsのjsファイル内で他の動きをするコードを書いた所、同一ページで目的の動作をしたため、chrome拡張の読み込み自体には問題はありません。）

正しくSubmitボタンを取得するためにはどうすればよいでしょうか。

Comments

[kei344]

質問タグ「Chrome extension」をつけることをお勧めします。

Answer 1

[0]が不要

var subButton=document.getElementsByClassName("btn-primary");
if(subButton.length){
    console.log("subButtonは存在します");
}

getElementsByClassName は要素のコレクション(≒配列)を返しますので、lengthプロパティを持ちますが、コレクションから[0]で一つの要素を取り出したら、それはlengthプロパティは持ちません。

[0]を付けるなら、

var subButton=document.getElementsByClassName("btn-primary")[0];
if(subButton){
    console.log("subButtonは存在します");
}