Question

我有一个包含两个跨度的span标记。它看起来像这样：

<span>
    <span style="display:none;">Title</span>
    <span class="the_title">Title </span>
</span>

第一个跨度和第二个跨度有不同的目的，在这个问题中没有真正解决。当我将跨度作为一个整体打印到控制台时，它会正确打印。但是，如果我尝试在里面打印元素，那就不一样了。

想象一下，javascript中父级跨度为this。使用：

console.log(this.childNodes[0]);

结果：

<span style="display:none;">Title</span>

然而，

console.log(this.childNodes[1]);

结果：

#text

另外

$(this.childNodes[1]).hide();

什么也没做。

我想隐藏第二个跨度有一个整体。

Answer 1

您正在查看的内容是text node.它是标记之间的实际文本（或者在这种情况下，是空格）。

看看当你看到更多孩子时会发生什么：

＆＃13;

var parent = document.querySelector('span');
console.log(parent.childNodes[0].toString());
console.log(parent.childNodes[1].toString());
console.log(parent.childNodes[2].toString());
console.log(parent.childNodes[3].toString());

＆＃13;

<span>
    <span style="display:none;">Title</span>
    <span class="the_title">Title </span>
</span>

＆＃13;

您只能使用children获取实际元素：

＆＃13;

var parent = document.querySelector('span');
console.log(parent.children[0].toString());
console.log(parent.children[1].toString());
console.log(parent.children[2]);

＆＃13;

<span>
    <span style="display:none;">Title</span>
    <span class="the_title">Title </span>
</span>

＆＃13;

为什么这个跨度不会隐藏，为什么它会显示为#text？

1 个答案: