Question

我试图通过与该DOM的其余部分的关系选择一个元素：

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

如下所示：

let daddy = document.getElementById('dad');
daddy.firstChild.textContent = "Im first";

JS所做的是，不是改变其内部HTML，而是将字符串作为'dad'<div>的第一个元素插入。

这是有道理的，但是，如何使用此属性来选择第一个子项并替换其内容？而不是将内容作为元素的第一个孩子插入。

Answer 1

#dad的第一个孩子是文本节点，因为<div id="dad">和<p>之间有空格。如果删除这些空格，它可以正常工作：

let daddy = document.getElementById('dad');
daddy.firstChild.textContent = "Im first";

<div id="dad"><p>son</p><p>son</p></div>

或者您可以使用firstElementChild属性：

let daddy = document.getElementById('dad');
daddy.firstElementChild.textContent = "Im first";

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

Answer 2

children（）方法返回所选元素的所有直接子节点。

此方法仅遍历DOM树中的单个级别。

$("#dad").children(":first").text("Im first");

Answer 3

或者，循环遍历子节点，直到找到第一个：

＆＃13;

let daddy = document.getElementById('dad');
var child = daddy.firstChild;
while(child && child.nodeType !== 1) child = child.nextSibling;
child.textContent = "Im first";

＆＃13;

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

＆＃13;

Answer 4

您所看到的是预期的。这是因为文本节点比其他元素稍微不那么明显。看着你的HTML：

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

你有#dad div，里面有3个文本节点和2个元素注释。你现在可以发现文本节点吗？（提示，新行和制表符是文本）。出于这个原因，许多浏览器现在实现firstElementChild。

您还可以在修改前确认nodeType === 1。您可以阅读有关不同node types here的内容。您还可以删除所有空格，但这会导致难以阅读的代码：

<div id="dad"><p>son</p><p>son</p></div>

通过.firstChild属性更改DOM内容

4 个答案: