【JavaScript】指定したClassNameを含むIdをすべて取得する

はじめに

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画面上で何度もクリックしないといけない！という場合に、ワンクリックで済むので便利です。