■概要
JavaScriptでオブジェクトを探す時に関数です。
これらを利用して動的なページを作ることができます。
| 関数名 | 内容 | 戻り値 |
| getElementById | idをキーに探す | オブジェクト |
| getElementsByClassName | classをキーに探す | 複数のオブジェクト(配列) |
| getElementsByTagName | tag名をキーに探す | 複数のオブジェクト(配列) |
| querySelector | jQueryセレクタ | オブジェクト |
| querySelectorAll | jQueryセレクタ | 複数のオブジェクト(配列) |
■getElementById
<input id=”testtxt1″ type=”text”>
<script type=”text/javascript”>
var testtxt1 = document.getElementById(‘testtxt1’);
testtxt1.value = “テスト文字列”;
</script>
出力結果
■getElementsByClassName
<input class=”testtxt” type=”text”>
<input class=”testtxt” type=”text”>
<input class=”testtxt” type=”text”>
<script type=”text/javascript”>
var testtxts = document.getElementsByClassName(‘testtxt’);
for (var i = 0; i < testtxts.length; i++) {
testtxts[i].value = 2 * i;
}
</script>
出力結果
■getElementsByTagName
<select id="testSel">
<option></option>
<option></option>
<option></option>
</select>
<script type="text/javascript">
var testSel = document.getElementById('testSel');
var tOpts = testSel.getElementsByTagName('option');
for (var i = 0; i < tOpts.length; i++) {
tOpts[i].innerHTML = i * 10000;
}
</script>
出力結果
