JavaScriptでHTML要素の値を取得する方法


  1. getElementByIdを使用する方法: HTML要素には一意のID属性を設定しておきます。次に、getElementByIdメソッドを使用してその要素を取得し、valueプロパティを使用して値を取得します。

    <input type="text" id="myInput">
    var myInput = document.getElementById("myInput");
    var value = myInput.value;
  2. querySelectorを使用する方法: CSSセレクタを使用して要素を指定し、querySelectorメソッドを使用して要素を取得します。取得した要素のvalueプロパティを使用して値を取得します。

    <input type="text" id="myInput">
    var myInput = document.querySelector("#myInput");
    var value = myInput.value;
  3. getElementsByClassNameを使用する方法: 要素のクラス名を使用して要素を指定し、getElementsByClassNameメソッドを使用して要素のコレクションを取得します。要素のコレクションの最初の要素のvalueプロパティを使用して値を取得します。

    <input type="text" class="myInput">
    var myInputs = document.getElementsByClassName("myInput");
    var value = myInputs[0].value;

これらはいくつかの一般的な方法ですが、他にもさまざまな方法があります。要件に合わせて最適な方法を選択してください。