JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)

JavaScriptのID値を指定して要素ノードを取得するサンプルです。
getElementByIdメソッドを使用します。
要素とは、<input type="button" value="ボタン">とある場合、inputが要素です。typeとvalueは属性で、"button"と"ボタン"は属性値です。

getElementByIdメソッド

サンプル

getElementByIdメソッドのサンプルです。
「表示」ボタンを押すと、getElementByIdメソッドでテキストボックスのID値を取得して、そのvalue値をテキストに表示します。
サンプルで使用しているテキストボックスのhtmlです。↓
<input type="text" id="input1" value="あいうえお" maxlength="6">
また、テキストボックスの文字を変えて「表示」ボタンを押すと入力した文字が表示されます。

入力内容:

コード

上記サンプルのコードです。
3行目は、getElementByIdメソッドでID値の「input1」を指定して11行目を取得しています。
4行目は、console.logで、getElementByIdメソッドで取得した内容を確認しています。
6行目は、取得したvalue値を10行目に出力しています。

<script>
function btn1_click(){
	var i1 = document.getElementById('input1');
	console.log(i1); //↓出力内容
	// <input type="text" id="input1" value="あいうえお" maxlength="6">
	document.getElementById("s1").innerHTML = i1.value;
}
</script>
<body >
<p>入力内容:<span id="s1"></span></p>
<input type="text" id="input1" value="あいうえお" maxlength="6">
<input type="button" value="表示" onclick='btn1_click()'>
</body>

関連の記事

JavaScript タグ名を指定して要素ノードを取得する(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得する(getElementsByClassName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)



△上に戻る