javascript - 使用 javascript 访问 class=column

Question

如何使用 javascript 而不是使用 jquery 访问 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

可能是这样的。你会想把它放在一个window.onLoadoronclick或其他一些函数中以使其工作，但你明白了吗？

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 2

在除旧版 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;
}

测试的三个条件是

• 它有标签名吗？（-> 它甚至是一个元素吗？）
• 是<div>吗？
• 它有column课吗？

虽然最后一个条件只有在它只有那个类时才有效，但这可能仍然适用于你。

Answer 3

有几种方法。最简单的是使用 querySelectorAll('.column') 但它是新的，所以它只能在现代浏览器中工作。当然，其他人会发布一个答案，解释如何以更兼容的方式进行操作。