■ はじめに

の続き。
「１）オブジェクト取得系」を掘り下げる

【１】getElementById()

* 指定したIDの要素のオブジェクト取得
 => 詳細は以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2011/12/29/200502

【２】getElementsByTagName()

* 指定したタグのエレメント取得。
* タグ版・getElementById()みたいな感じ。

サンプル

https://dk521123.hatenablog.com/entry/2022/11/24/230044

// より抜粋

  const inputTexts = document.getElementsByTagName("input");
  for(let i = 0 ; i < inputTexts.length ; i ++ ) {
    console.log(`Value = ${inputTexts[i].value}`);
    if (!inputTexts[i].value) {
      canAdd = false;
      break;
    }
  }

【３】querySelectorAll()

* 指定したセレクタと一致した全要素を返す

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
https://1-notes.com/javascript-queryselectorall-and-queryselector/

* セレクタについては、以下の関連記事を参照のこと

セレクタ
https://dk521123.hatenablog.com/entry/2021/02/27/000000

１）サンプル

* 以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2022/11/28/000000

【４】querySelector()

* 指定したセレクタと一致した初めの要素を返す
* 1要素版・querySelectorAll()みたいな感じ。

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

１）サンプル

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<button id="btn1">Click me!!</button>
<p class="p1">Click : 0</div>
</body>
<script>
var index = 0;
const button = document.querySelector('#btn1');
button.addEventListener('click', function(event) {
  index = index + 1;
  const result = document.querySelector('.p1');
  result.innerHTML = `Click : ${index}`;
});
</script>
<html>

例２：動的に生成したオブジェクトの値が取得できるかを試す

<!doctype html>
<html>
<head>
</head>
<body>
<div id="inputDiv"></div>
<button type="button" onclick="demoForCreateElement()">Press first. demoForCreateElement</button><br />
<input id="test" class="testClass" type="text" maxlength="100" size="30" placeholder="ex. item1/#item1/.itemClass1"><br />
<button type="button" onclick="demoForGetElementById()">demoForGetElementById</button>
<div id="result1">Result</div>
<button type="button" onclick="demoForQuerySelector()">demoForQuerySelector</button>
<div id="result2">Result</div>
</body>
<script>
var index = 0;

function demoForCreateElement() {
  index = index + 1;
  const newInput = document.createElement("input");
  newInput.setAttribute("id", `item${index}`);
  newInput.setAttribute("name", `itemName${index}`);
  newInput.setAttribute("class", `itemClass${index}`);
  newInput.setAttribute("type", "text");
  newInput.setAttribute("type", "text");
  newInput.setAttribute("maxlength", "5");
  newInput.setAttribute("size", "10");

  const inputDiv = document.getElementById("inputDiv");
  inputDiv.appendChild(newInput);
}

function demoForGetElementById() {
  const inputTest = document.getElementById("test");
  const targetId = inputTest.value.toString();
  console.log(`targetId = ${targetId}`);
  const targetInput = document.getElementById(targetId);
  console.log(`targetInput = ${targetInput}`);
  var result = document.getElementById("result1");
  result.innerHTML = targetInput.value;
}

function demoForQuerySelector() {
  const inputTest = document.getElementById("test");
  const targetId = inputTest.value.toString();
  console.log(`targetId = ${targetId}`);
  const targetInput = document.querySelector(targetId);
  console.log(`targetInput = ${targetInput}`);
  var result = document.getElementById("result2");
  result.innerHTML = targetInput.value;
}
</script>
</html>

プログラムの超個人的なメモ

Memo for Programming.

【JS】DOM ～基本編 / オブジェクト取得～

■ はじめに

目次

【１】getElementById()

【２】getElementsByTagName()

サンプル

【３】querySelectorAll()

１）サンプル

【４】querySelector()

１）サンプル

関連記事