Javascript:: 通过 class 触发 firstChild 元素

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"> 标记之间的 space和第一个 button 元素。

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

var firstBtn = document.querySelector('#test button:first-child');
firstBtn.className = (firstBtn.className !== "red")? "red" : "blue";

Answer 2

您可以先获取带有 id=test 的 div 包装器，然后使用下面的代码加载该包装器内的第一个子元素，然后您可以添加 class 'red' element/button.

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 将只是一个带有 class 名称的字符串。要更改它，您实际上需要使用类似的语法在按钮上设置 class名称。

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:: 通过 class 触发 firstChild 元素

Javascript:: Trigger firstChild element by class

html

javascript

css

classname

getelementbyid