Question

这段代码会自我说明并解释我想要实现的目标......

<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的新手......

谢谢！

Answer 1

document.getElementById("test").firstChild不是您对第一个button的引用，而是对文本节点的引用（即开放<div id="test">标记与第一个{{1}之间的空格元素。

使用button来获取对第一个document.querySelector('#test button:first-child')元素的引用

button

Answer 2

您可以先使用id = test获取div包装器，然后使用下面的代码加载该包装器中的第一个子元素，然后您可以添加类＆＃39; red＆＃39;到那个元素/按钮。

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

Answer 3

更新了jsfiddle

var firstBtn = document.querySelector('#test button:first-child');

if (firstBtn !== "red") {
    firstBtn.className = "red";
} else {
    firstBtn.className = "blue";
}

Answer 4

不使用firstChild，而是使用childNodes。此外，firstBtn只是一个带有类名的字符串。要更改它，您实际上需要使用类似的语法在按钮上设置className。

var firstBtn=document.getElementById("test").childNodes[1].className;
(firstBtn!="red")?document.getElementById("test").childNodes[1].className="red":document.getElementById("test").childNodes[1].className="blue";

Javascript ::按类触发firstChild元素

4 个答案: