getElementByIdとquerySelectorの違い

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

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

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

js
1for (let i = 1; i <= 10; i++) {
2  const p = document.createElement("p");
3  // idをカウンタiの値に設定
4  p.setAttribute("id", i);
5  p.textContent = i;
6  document.body.appendChild(p);
7
8  // カウンタで要素を取得
9  console.dir(document.getElementById(i));
10  
11  // console.dir(document.querySelector(i));
12
13}

行動規範の内容に同意します

回答3件

ベストアンサー

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

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

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

JavaScript
1// 案１）
2console.dir(document.querySelector("#" + CSS.escape(i)));
3
4// 案２）
5console.dir(document.querySelector("[id='"+i+"']"));

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

投稿2021/12/22 14:16

cx20

総合スコア4648

bag_ai

2021/12/23 12:58

ありがとうございます。上手く要素を取得することができました。下記の中で変数iをシングルクォーテーションとダブルクォーテーションで囲んでいます。 console.dir(document.querySelector("[id='"+i+"']")); これはシングルクォーテーションだけだと+i+という文字列になってしまうところをダブルクォーテーションでキャンセルするという考えでよろしいでしょうか？

cx20

2021/12/23 13:14

> +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

2021/12/24 13:02

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

行動規範の内容に同意します

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

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