Javascript:: 按类触发 firstChild 元素

Posted 2023-03-16

【中文标题】Javascript:: 按类触发 firstChild 元素

【英文标题】：Javascript:: Trigger firstChild element by class

【发布时间】：2015-06-07 09:21:42

【问题描述】：

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

<style>
.redbackground:red
.bluebackground: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 新手...

谢谢！

【问题讨论】：

firstElementChild 是firstChild 的更可靠和有用的版本。它将忽略任何文本节点。

【参考方案1】：

document.getElementById("test").firstChild 不是您可能期望的对第一个 button 的引用，而是对文本节点的引用（即打开的 <div id="test"> 标记和第一个 button 元素之间的空间。

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

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

【参考方案2】：

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

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

【讨论】：

.childNodes[1] 是第二个子元素，而不是第一个

@FabrizioCalderan .childNodes[1] 与元素节点 .children[0] 相同，但 .childNodes[0] 是文本节点而非元素节点。您可以了解更多关于节点类型的信息here。

【参考方案3】：

更新jsfiddle

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

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

【参考方案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";