Javascript 从元素中获取子节点

我有以下代码：

<div class="className" id="div-1" onClick="selPic(this.id);">
   <span>some text</span>
</div>
<div class="className" id="div-2" onClick="selPic(this.id);">
   <span>some text</span>
</div>
<div class="className" id="div-3" onClick="selPic(this.id);">
   <span>some text</span>
</div>

---

有什么想法吗？

只要更正代码中的拼写错误即可：

function selPic(id) {
    document.getElementById(id).childNodes[0].style.opacity = "1";
}

将childNone替换为childNodes

它应该是childNodes而不是childNode：

function selPic(id) {
    document.getElementById(id).childNodes[0].style.opacity = "1";
}

另外，习惯使用返回函数：

function selPic(id) {
   var ss = document.getElementById(id).childNodes[0].style.opacity = "1";
   return ss;
}

---

您有一点错误代码

function selPic(id) {
document.getElementById(id).childNodes[0].style.opacity = "1";
}

---

按索引号选择子节点的想法通常不起作用。这是因为您无法确定span元素的编号。根据您构建列表的方式，在您感兴趣的范围之前可能存在不可见的子节点，例如空白文本节点。这就是为什么您惊讶地发现必须使用索引值1而不是0

一种更健壮的方法是在父元素上调用getElementsByTagName“span”，以检索其中的所有跨度。然后获取返回数组中的第一项

此外，我建议函数的参数应该是要高亮显示的元素，而不仅仅是元素的ID。如果您遵循我的建议，您的HTML将如下所示：

<div class="className" id="div-1" onClick="selectPicture(this);">
   <span>some text</span>
</div>
<div class="className" id="div-2" onClick="selectPicture(this);">
   <span>some text</span>
</div>
<div class="className" id="div-3" onClick="selectPicture(this);">
   <span>some text</span>
</div>

function selectPicture(container) {
    container.getElementsByTagName('span')[0].style.opacity = 1;
}

---

通过修改span的类名并编写适当的CSS来实现样式更改会更好，但我将把这些考虑因素留给您。

访问childNodes而不是childNode数组的元素1以修改span不透明度：

document.getElementById(id).childNodes[1].style.opacity = "1";

---

是的，这奏效了！除了应该是childNodes的childNode之外，我还有一个错误的数字应该是[1]而不是[0]。谢谢我很高兴能帮助你。因此，请将我的答案标记为有效答案：。此方法仅在偶然情况下有效。您永远无法确定索引应该是0还是1，因为在跨度之前可能有一个不可见的子节点。请参阅我的答案，以获得更可靠的解决方案。

function selectPicture(container) {
    container.getElementsByTagName('span')[0].style.opacity = 1;
}

document.getElementById(id).childNodes[1].style.opacity = "1";