javascript - Javascript::按类触发firstChild元素

这段代码可以说明一切，并解释我要实现的目标...

<style>
.red{background:red}
.blue{background:blue}
</style>

<div id=test>
    <button>1</button>
    <button>2</button>
</div>

<script>
var firstBtn=document.getElementById("test").firstChild.className;

(firstBtn!="red")?firstBtn="red":firstBtn="blue";
</script>

这是jsFiddle:
http://jsfiddle.net/hnfeje2q/

非常简单，但是由于我是JavaScript新手...

谢谢!

最佳答案

您可以首先使用id = test获取div包装器，然后使用以下代码在该包装器中加载第一个子元素，然后可以将“红色”类添加到该元素/按钮。

var wrapper = document.getElementById("test");
var firstButton = wrapper.childNodes[1];

// if the button doesn't have a red class, set it
if(firstButton.className.indexOf('red') == -1) {
    firstButton.className = firstButton.className + ' red';
}

或使用查询选择器

var firstButton = document.querySelector('#test button:first-child');
if(firstButton && firstButton.className.indexOf('red') == -1) {
    firstButton.className = firstButton.className + ' red';
}