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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

5回答

29880閲覧

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

phiilo_

総合スコア85

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/06/21 01:56

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

<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を取得できますか?

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/21 02:01

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

2017/06/21 02:12

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

2017/06/21 02:15

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

回答5

0

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

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

sample

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

javascript

1window.onload = function onLoad() { 2 var b=document.querySelectorAll(".b"); 3 for(var i=0;i<b.length;i++){ 4 console.log(b[i].innerHTML); 5 } 6 var c=document.querySelectorAll("[id^=a]"); 7 for(var i=0;i<c.length;i++){ 8 console.log(c[i].innerHTML); 9 } 10}

HTML

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

こまかいチェック

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

javascript

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

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

投稿2017/06/21 02:04

編集2017/06/21 02:45
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phiilo_

2017/06/21 02:10

1000個記述しないといけないんですね。大変ですね。 var aiueo = document.getElementsByClassName("a01").innerHTML; console.log(aiueo); クラスにしましたらundefinedとなりました。
yambejp

2017/06/21 02:24

sampleつけておきます
phiilo_

2017/06/21 04:31

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

0

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 02:14

編集2017/06/21 02:32
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phiilo_

2017/06/21 02:23

ご回答ありがとうございます。 var aiueo = document.querySelectorAll('[id^="a"]').innerHTML; としましたが、undefinedとなりました。a01〜a10まで取得する場合は、「a」に01-10を接続しなければいけませんよね。for文にその内容を記述するというところでしょうか...。うーん。
yambejp

2017/06/21 02:26

querySelectorAll()が返すのはリストなのでループで処理して下さい
退会済みユーザー

退会済みユーザー

2017/06/21 02:33

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

2017/06/21 04:32

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

0

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

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

投稿2017/06/21 02:21

h_daido

総合スコア824

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/06/21 04:00

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

2017/06/21 04:36

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

0

ベストアンサー

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

javascript

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

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

投稿2017/06/21 02:14

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phiilo_

2017/06/21 02:26

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

2017/06/21 02:32

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

2017/06/21 04:30

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

2017/06/21 05:09 編集

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 を使用するのが妥当だと思われます。
m.ts10806

2017/06/21 05:17

同感です。今回は折角の提示コードを活かすというのと質問者の初心者であるという状況から分かりやすさ重視の回答をしました。 ですが、 おそらく「1000個あったら1000行」はあくまでたくさんあったときという例えだとは思うのですが、ページが大きくなれば2桁で終わるとは限りませんし、本来はIDでもCLASSでも今回のように連番的な振り方ではなく、ちゃんと意味のあるネーミングをしてあげるべきですね。メンテナンス性も損ないます。 あくまで「ひとまず動けばいい」重視のやり方のひとつ(ただし汎用性はなく、空回りの無駄ループを生む可能性が高く効率も良くない方法)という認識でお願いします。
guest

0

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

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 04:38

phiilo_

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/21 04:41

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

2017/06/21 04:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問