Java ScriptのDocumentで複数ある同じclass名から一つを取得したい。

Question

前提・実現したいこと

　Java Scriptでスクレイピングの一環としてあるサイトの自動で制御するプログラムを作成中です。
そこで、サイト内のクラスを取得して、click()で自動でクリックさせたいと思ってます。
しかし、同じクラス名が複数あり、その中から一つの要素を取得する方法を発見できませんでした。

iPhoneのショートカットで動作させたいので、PythonのSeleniumではなく、JSであえてやってます。
なので、モジュールのインストール等は極力避けたいと考えてます。
また、サイトのHTMLは個人情報が含まれるので、修正を加えてます。

JavaScriptはあまり使ったことがないので、的外れな質問かもしれませんが、どうぞご協力お願いします。

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

TypeError: null is not an object (evaluating
'document.querySelector(".btn_style3
radius 10").click')

該当のソースコード

function login2() {
    document.querySelector(".btn_style3 radius_10").click();
 }
login2()

completion(result);
 

 <div class="box_btn_style5">
              <button type="button" class="btn_style3 radius_10" onclick="location.href='./abcd.php'"><div><img src="./images/icon_1.png" alt="###"></div><div><span>###</span><span>（Register health data）</span></div></button>
            </div>
            <div class="box_btn_style5">
              <button type="button" class="btn_style3 radius_10" onclick="location.href='./efgh.php'"><div><img src="./images/icon_2.png" alt="###"></div><div><span>###</span><span>（Review past reports）</span></div></button>
            </div>
            <div class="box_btn_style5">
              <button type="button" class="btn_style3 radius_10" onclick="location.href='./ijkl.php'"><div><img src="./images/icon_3.png" alt="###"></div><div><span>###</span><span>（Review purpose of use）</span></div></button>
            </div>
            <div class="box_contact">
              <ul>

試したこと

elements = document.queryselectorall(".btn_style3 radius_10")
ですべてのクラスを取得し、
elements[0]で指定するなど。

補足情報（FW/ツールのバージョンなど）

HTMLはchromeの「ページのソースを表示」から取得しました。

Comments

[int32_t]

btn_style3 と radius_10 を持つ要素は提示されているHTMLには３つありますが、欲しいのは最初のものですか?

[yambejp]

スクレイピングしたソースにJSを追加しクリックして動作させることができる環境なのでしょうか？

[maisumakun]

> 同じクラス名が複数あり、その中から一つの要素を取得する方法

「どれでもいいから1つ」なのでしょうか、それとも「特定の1つ」を選ばなければならない状況でしょうか？

[Fantastic_baby]

皆様
ご連絡ありがとうございます。
説明が足りずすいません。一番上（onclick="location.href='./abcd.php'")の要素のみを選びたいと思ってます。
iphoneの環境で同じサイトの他のページではclick()が使えることを確認しています。

[Fantastic_baby]

yambejpさん回答ありがとうございます。
しかし、同様のエラーがでてしました。
なので、querySelectorAllで三つの要素を取得して、その中から特定の一つを取得する方法を教えてもらえないでしょうか。

Answer 1

「btn_style3 radius_10」の両方のクラスが設定されたHTML要素を掴みたいということですか？

document.querySelector(".btn_style3.radius_10").click();

複数ある場合は先頭の要素を掴みます