【JavaScript】指定したClassNameを含むIdをすべて取得する
【JavaScript】指定したClassNameを含むIdをすべて取得する
JavaScript
プログラム
作ってみた・やってみた
2017/5/23
はじめに
ID一覧を取得する方法がわからなかったので、 色々調べて動いたメモ。
やりたいこと
<div class="hoge" id="1"></div>
<div class="hoge" id="2"></div>
<li class="hoge" id="nuo"></li>
<li class="hoge" id="gaa"></li>
<li class="hoge" id="hua"></li>などとなっているときに、class="hoge"の
id=1,2,nuo,gaa,huaといった不規則なID名をすべて取り出す。
やり方
指定したクラスのID一覧を取得
//指定したクラスの要素をcsに入れる
var cs=document.getElementsByClassName("クラス名");
//csの中からIDの情報をループで取り出す
for (var i=0; i< cs.length;i++){
idd=cs[i].getAttribute("id");
}こんな感じでiddにIDが入った。
応用
取得したIDをすべてクリックする
もともとはこれがやりたくて調べた
var cs=document.getElementsByClassName("クラス名");
for (var i=0; i< cs.length;i++){
idd=cs[i].getAttribute("id");
var clickMe = document.getElementById(idd);
if( /*@cc_on ! @*/ false ) {
clickMe.fireEvent("onclick");
}
else {
var event = document.createEvent( "MouseEvents" );
event.initEvent("click", false, true);
clickMe.dispatchEvent(event);
}
true
}ブックマークレット化
ブックマークレット化すれば、ボタンを押すだけで実行される
javascript:(function()
{
var cs=document.getElementsByClassName("クラス名");
for (var i=0; i< cs.length;i++){
idd=cs[i].getAttribute("id");
var clickMe = document.getElementById(idd);
if( /*@cc_on ! @*/ false ) {clickMe.fireEvent("onclick");
}
else {
var event = document.createEvent( "MouseEvents" );
event.initEvent("click", false, true);
clickMe.dispatchEvent(event);
}
true
}
})();WEB画面上で何度もクリックしないといけない！という場合に、ワンクリックで済むので便利です。