javascript - javascript を使用して class=column にアクセスする

Question

jqueryを使用せずにjavascriptでclass = columnにアクセスする方法

<div id="columns">
   <div class="column"><header>A</header></div>
   <div class="column"><header>B</header></div>
   <div class="column"><header>C</header></div>
</div>

Answer 1

いくつかの方法があります。最も簡単なのは querySelectorAll('.column') を使用することですが、これは新しいため、最新のブラウザーでのみ機能します。きっと他の誰かが、より互換性のある方法でそれを行う方法を説明する回答を投稿するでしょう.

Answer 2

このようなものかもしれません。window.onLoadこれを機能させるために、またはonclickその他の関数に入れたいと思うでしょうが、わかりますか?

divs = document.getElementsByTagName("div"); 
for( var i = 0; i < divs.length; i++ ) 
{
    if( divs[i].className == "column" ||
        divs[i].className == "another-class" )  {
    //Do something here
    }
}

複数のクラスを持つ可能性のある要素を検索するには、次を試してください。

例はこちら

divs = document.getElementsByTagName("div"); 
for( var i = 0; i < divs.length; i++ ) 
{
    var classes=divs[i].className.split(" ");
    if( searchStringInArray( classes, "column") ||
        searchStringInArray( classes, "test2") )  {
            divs[i].innerHTML="Changing";
    }
}

function searchStringInArray (stringArray, search) {
    for (var j=0; j<stringArray.length; j++) {
        if (stringArray[j].match ("(^|\s)"+search+"(?=\s|$)")) return true;
    }
    return false;
}
​

Answer 3

古い Internet Explorer を除くほとんどすべてのブラウザで、

document.getElementById('columns').getElementsByClassName('column');

IE<9 ブラウザーには がないためgetElementsByClassName、子ノードを反復処理して、それらが

function getColumnDivs() {
    var results = new Array();
    var nodes = document.getElementById('columns').children;

    for (var i = 0; i < nodes.length; i++)
       if (typeof nodes[i].tagName != "undefined" &&
           nodes[i].tagName.toLowerCase() == "div" &&
           nodes[i].className.className == "column") {

           results.push(nodes[i]);
       }

    return results;
}

テストされる 3 つの条件は次のとおりです。

• それはtagNameを持っていますか？(->それも要素ですか?)
• ですか<div>？
• columnクラスはありますか？

最後の条件は、そのクラスしかない場合にのみ正確に機能しますが、これはおそらくまだ機能します。