getElementByIdとquerySelectorの違い

Question

pタグを複数作り、各idにカウンタ変数を代入しました。

idから要素を取得しようとしたところ、
document.getElementByIdでは上手くいきましたが、
document.querySelectorでは取得できませんでした。

このような場合はdocument.querySelectorは使えないのでしょうか？

for (let i = 1; i <= 10; i++) {
  const p = document.createElement("p");
  // idをカウンタiの値に設定
  p.setAttribute("id", i);
  p.textContent = i;
  document.body.appendChild(p);

  // カウンタで要素を取得
  console.dir(document.getElementById(i));
  
  // console.dir(document.querySelector(i));

}

Answer 1

数値のみの ID だと "#1" としても以下のようなエラーが出るようです。

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.

こちらでどうでしょうか？

// 案１）
console.dir(document.querySelector("#" + CSS.escape(i)));

// 案２）
console.dir(document.querySelector("[id='"+i+"']"));

＜参考＞
■ querySelectorで先頭が数値で、URLエンコードされたIDの取得はできないの？
https://teratail.com/questions/120360

Comments

[bag_ai]

ありがとうございます。
上手く要素を取得することができました。
下記の中で変数iをシングルクォーテーションとダブルクォーテーションで囲んでいます。
console.dir(document.querySelector("[id='"+i+"']"));

これはシングルクォーテーションだけだと+i+という文字列になってしまうところをダブルクォーテーションでキャンセルするという考えでよろしいでしょうか？

[cx20]

> +i+という文字列になってしまう
はい。その認識であっています。以下、編集のイメージです。
NG) "文字列 + i + 文字列" ⇒ "[id='+i+']"
OK) "文字列" + i + "文字列" ⇒ "[id='1']"

文字列連結が多くて読みづらいという場合は、
yambejp さん回答にあるような書き方をすることもできます。
OK)`[id="${i}"]` ⇒ `[id="1"]`

＜参考＞
■ テンプレートリテラル (テンプレート文字列)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

[bag_ai]

分かりやすい説明ありがとうございます。
理解できました。

Answer 2

トラブルのもとなので数値だけのIDは使わないに限ります
とはいえ以下でつかめます

for (let i = 1; i <= 3; i++) {
  const p = document.createElement("p");
  p.setAttribute("id", i);
  p.textContent = i;
  document.body.appendChild(p);
  console.log([document.getElementById(i),document.querySelector(`[id="${i}"]`)]);
}

Comments

[bag_ai]

このような場合は属性セレクタを使うのですね。
ありがとうございました。

Answer 3

querySelectorの引数はCSSセレクタです。
querySelector('#'+i);のようにすれば取得できるのでは。
リファレンスくらい読みましょう。
Document.querySelector() - Web API | MDN