質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20432questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11516questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

【JavaScript】HTMLのIDを複数取得したい場合

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 7,078

phiilo_

score -13

下記ソースコードがあるとします。
(コピペでそのまま動くと思います)

<html>
    <head>
        <script>

         window.onload = function onLoad() {

          for(var i = 0; i < 10; i++) {

           var aiueo = document.getElementById("a01").innerHTML;
           console.log(aiueo);

          }

         }

        </script>
    </head>


    <body>

     <p id="a01">あいうえお</p>
     <p id="a02">かきくけこ</p>
     <p id="a03">さしすせそ</p>
     <p id="a04">たちつてと</p>

    </body>
</html>

HTML内には<p>タグにidがそれぞれついており、これが複数あるとします。
これをJavaScriptのfor文などを利用し、複数のidを取得したいです。

たとえば
var aiueo = document.getElementById("a01").innerHTML;
var kakikukeko = document.getElementById("a01").innerHTML;
var sasisuseso = document.getElementById("a01").innerHTML;
.
.
.

と書いていくのはあまりにも冗長で、
idが1000個あったら1000行になってしまいます。

完結に記述できればと思っているのですが、初級者の私にはわかりませんでした。
どのようにすれば複数のIDを取得できますか?

皆さまのご指導とご鞭撻をお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/06/21 11:01

    IDの命名に規則性はありますか?また、「ページ内全て取得」or「ある条件下のものだけ取得」どちらでしょうか?

    キャンセル

  • phiilo_

    2017/06/21 11:12

    命名規則はありません。「ある条件下のものだけ取得」になります。例えばid="a01"〜"a10"まで、とかです!

    キャンセル

  • mts10806

    2017/06/21 11:15

    一応、「a」+「数字0埋め」という規則性があるので回答の通りでとれそうではあります。

    キャンセル

回答 5

+5

idを1000個振っているなら1000個羅列するのが筋でしょう
idというのはそういうものです。
もちろん、数値を使ったループはできますが

データを取りたいのであれば対象タグに同じclassを振って
一気に得る運用方法をお勧めします

 sample

idからアクセスする方法、classからアクセスする方法を付けておきます

window.onload = function onLoad() {
  var b=document.querySelectorAll(".b");
  for(var i=0;i<b.length;i++){
    console.log(b[i].innerHTML);
  }
  var c=document.querySelectorAll("[id^=a]");
  for(var i=0;i<c.length;i++){
    console.log(c[i].innerHTML);
  }
}
<p id="a01" class="b">あいうえお</p>
<p id="a02" class="b">かきくけこ</p>
<p id="a03" class="b">さしすせそ</p>
<p id="a04" class="b">たちつてと</p>

 こまかいチェック

一応気にするかもしれないので追記します
document.querySelectorAll("[id^=a]")は「idがaから始まる」しかチェックできませんので
id="abc"などにもヒットしてしまいます。
「aから始まって数字2文字」を絞り込むなら以下のようにして下さい

  var d= Array.prototype.slice.call(document.querySelectorAll("[id]"),0).filter(function(i){
    return i.id.match(/^a\d{2}$/);
  });
  for(var i=0;i<d.length;i++){
    console.log(d[i].innerHTML);
  }


なお、idが1000あるとき最後のidが「a1000」だとすると合わなくなりますので
idの付け方を安易にa01から始めるのはルール付としては不適格です
1000を上限とするならa0001(もしくはa0000)から始めるべきです
とりあえずaではじまって数字の羅列だけチェックしたいなら
パターンマッチは「/^a\d+$/」になります

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 11:10

    1000個記述しないといけないんですね。大変ですね。
    var aiueo = document.getElementsByClassName("a01").innerHTML;
    console.log(aiueo);

    クラスにしましたらundefinedとなりました。

    キャンセル

  • 2017/06/21 11:24

    sampleつけておきます

    キャンセル

  • 2017/06/21 11:34

    To: phiilo_さん
    getElementsByClassName の取得結果は HTMLCollection なので getElementById とは使い方が違います。

    【document.getElementsByClassName() - classで要素を取得する】
    https://syncer.jp/javascript-reference/document-getelementsbyclassname#section-5-1

    キャンセル

  • 2017/06/21 13:31

    参考にさせていただきます

    キャンセル

+3

id属性が付加されている要素を一括で取得したい場合、以下の記述で要素の取得が可能です。

document.querySelectorAll('[id]')

また、例に上げられているコードのようにid="a01"id="a02"というように必ず頭にaが付くもののみを取得したいといった場合、

document.querySelectorAll('[id^="a"]')


とすることで、仮にid="b01"のようなものが存在しても、それらは無視してid="a??"となっているもののみが取得できます。

あとは、取得した要素をループで回せば、処理が行えるはずです。

※querySelectorAllの引数はCSSのセレクタとほぼイコールなので、そちらも確認してみてください。


追記

querySelectorAllの返り値はnodeListとなるので、以下のようにループ処理を行ってください。

Array.prototype.forEach.call(document.querySelectorAll('[id^=a]'), function (el) {
  // 個々の処理を記述する
  console.log(el.getAttribute('id'));
});

innerHTMLの値を変数に保持したい場合はいかのような感じでしょうか。

var obj = {};

Array.prototype.forEach.call(document.querySelectorAll('[id^=a]'), function (el) {
  obj[el.getAttribute('id')] = el.innerHTML;
});
console.log(obj);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 11:23

    ご回答ありがとうございます。
    var aiueo = document.querySelectorAll('[id^="a"]').innerHTML;

    としましたが、undefinedとなりました。a01〜a10まで取得する場合は、「a」に01-10を接続しなければいけませんよね。for文にその内容を記述するというところでしょうか...。うーん。

    キャンセル

  • 2017/06/21 11:26

    querySelectorAll()が返すのはリストなのでループで処理して下さい

    キャンセル

  • 2017/06/21 11:33

    querySelectorAllの戻り値のループの方法を追記しました

    キャンセル

  • 2017/06/21 13:32

    参考にさせていただきます

    キャンセル

checkベストアンサー

+2

ご提示のHTMLのように規則性があるなら以下のように取得が可能です。
※要素が存在しないケースを考慮し、存在チェックを入れています
※値を保持しておきたい場合のために配列を利用しています

var array = [];
for(var i = 0; i < 10; i++) {
  now_id = "a"+( '00'  + i).slice( -2 );
  if(document.getElementById(now_id )){
    array[i]  = document.getElementById(now_id).innerHTML;
    console.log(array[i]);
  }
}

あとは用途によりけりでしょうか。
確認させていただいた「特定の条件下のものだけ」でしたら同名classを振って一気にとるのも手です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 11:26

    ご回答ありがとうございます!
    これ凄いですね!感動しました。
    idを取得するために1行1行書くなんてプログラマーとして情けない感じがするので、これを工夫してみたいです。

    キャンセル

  • 2017/06/21 11:32

    ただし元のコードを崩さないようにしただけなので、本来はもっとjavascriptの機能(querySelectorAllのような)をふんだんに使って効率よく、また汎用性高い組み方を目指してもいいと思います。

    キャンセル

  • 2017/06/21 13:30

    確かに。考えればもっと効率化はできそうですね。
    おかげさまで問題解決に至ったためベストアンサーとさせていただきました!
    またわからない事があれば是非教えてくださいね。ありがとうございました。

    キャンセル

  • 2017/06/21 14:07 編集

    1点だけ気になったので補足を。

    > idが1000個あったら1000行になってしまいます。
    matsu1006さんのコードを使用した場合、 [a01,a02,...a99,a00,a01,...,a99,a00,...] のように a99 でリセットされ、a00 から再開する挙動となる為、idが a100 以降は実行されず、a00~a99 を延々と処理し続ける事となります。
    ゼロパディングをするのであれば、配列の長さに応じてゼロパディングする長さを決定させてください。
    あるいは、ゼロパディングを諦め、ゼロサプレスの命名規則に変更して下さい。
    今後、コンテンツが増える事が想定されるなら、現在は a01~a99 の範囲におさまっていたとしても、コンテンツが100個を超えた時点で「a001~a999 でHTML文書のid属性値を振りなおす」か「a01~a99,a100~a999 のように既存の命名はそのままにして、一定の長さを保つ事を諦める」のいずれかの選択が要求されます。
    コンテンツが増えるたびにid属性値を振り直せば、CSSも書き換えなければならない為、現実的ではないと私は思います。なので、私ならゼロサプレスの命名規則を採用します。

    実際のところは他の方が回答されたように class 属性でグループ化するのが妥当だと思います。
    要素が1000個や2000個になった場合、一つ一つの要素に getElementById で参照するのは効率が悪いからです。
    特にパフォーメンス面では getElementsByClassName を使用するのが妥当だと思われます。

    キャンセル

  • 2017/06/21 14:17

    同感です。今回は折角の提示コードを活かすというのと質問者の初心者であるという状況から分かりやすさ重視の回答をしました。
    ですが、
    おそらく「1000個あったら1000行」はあくまでたくさんあったときという例えだとは思うのですが、ページが大きくなれば2桁で終わるとは限りませんし、本来はIDでもCLASSでも今回のように連番的な振り方ではなく、ちゃんと意味のあるネーミングをしてあげるべきですね。メンテナンス性も損ないます。

    あくまで「ひとまず動けばいい」重視のやり方のひとつ(ただし汎用性はなく、空回りの無駄ループを生む可能性が高く効率も良くない方法)という認識でお願いします。

    キャンセル

+2

みなさんのご意見が軒並み正しいとおもうのですが、ご自身で初級者と言われている方には難しいところもあるかとおもい、penを作ってみました。できるだけ元コードをいじらないようにしてるので理解しやすいかと。ご参考までに。

https://codepen.io/anon/pen/qjmxVw

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 13:00

    外部に誘導するときはざっくりしたロジックだけでも書いた上で
    リンクを確認してもらったほうが、よりこのサイトの有用性が高まると思います

    キャンセル

  • 2017/06/21 13:36

    ありがとうございます。確かに。
    外部サービスを見てもらった方が早いですね。次回からそうさせていただきますー。

    キャンセル

-1

ベストアンサーの回答によりこれで解決しました。
方法は色々あるようですが、わかりやすいです。

var array = [];
for(var i = 0; i < 10; i++) {
now_id = "a"+( '00'  + i).slice( -2 );
if(document.getElementById(now_id )){
array[i]  = document.getElementById(now_id).innerHTML;
console.log(array[i]);
}
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/21 13:41

    今回のように規則性があるもの限定のやり方という認識でお願いします。
    a以降が2桁3桁…が混在するような場合、英字も入る場合などはこれでは対応しきれません。

    キャンセル

  • 2017/06/21 13:46

    わたしの回答に書いたとおりこのidの命名方法はダメで、
    対応方法も汎用性にかけると思います。
    idは01から99まで確定でそれ以上絶対に増やさないという仕様を決めない限り
    この方法では破綻します(そもそも1000件とおっしゃったのは質問者さん)

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20432questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11516questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。