Question

如何使用javascript访问class = column而不使用jquery

<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
    }
}

要搜索可能包含多个类的元素，请尝试：

Example 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＆lt; 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;
}

测试的三个条件是

它有tagName吗？（ - ＆gt;它甚至是一个元素吗？）
是<div>？
是否有column类？

虽然最后一个条件只有只具有该类时才能正常工作，但这可能仍适合你。

使用javascript访问class = column

3 个答案: