从元素获取子节点

Get childnode from element

本文关键字：子节点 获取 元素      更新时间：2023-09-26

我有以下代码：

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

我想给点击元素的跨度一些样式，但我更愿意使用父元素的 id 作为参考，而不是给每个跨度一个 id。

我已经试过了，但它不起作用：

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

有什么想法吗？

访问 childNodes（不是 childNode）数组的元素 1 以修改跨度不透明度：

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

只需更正代码中的拼写错误：

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

将childNone替换为 childNodes 。

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

它应该是 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;
}

通过修改跨度的className并编写适当的 CSS 来实现样式更改会更好，但我会将这些考虑留给您。

相关文章：