Javascript 通过.firstChild属性更改DOM内容

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

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

JS所做的不是更改其内部HTML，而是将字符串作为“dad”的第一个元素插入

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

dad的第一个子元素是文本节点，因为

和

之间有空格。如果删除该空白，则效果良好：

let daddy=document.getElementById（'dad'）；
daddy.firstChild.textContent=“我是第一”
son
son
爸爸的第一个孩子是一个文本节点，因为
和
之间有空格。如果删除该空白，则效果良好：


let daddy=document.getElementById（'dad'）；
daddy.firstChild.textContent=“我是第一”
son
son
children（）方法返回所选元素的所有直接子元素

此方法只遍历DOM树下的单个级别

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

方法返回所选元素的所有直接子元素

此方法只遍历DOM树下的单个级别

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

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


let daddy=document.getElementById（'dad'）；
var child=daddy.firstChild；
while（child&&child.nodeType！==1）child=child.nextSibling；
child.textContent=“Im优先”

儿子

儿子

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


let daddy=document.getElementById（'dad'）；
var child=daddy.firstChild；
while（child&&child.nodeType！==1）child=child.nextSibling；
child.textContent=“Im优先”

儿子

儿子

您所看到的是预期的。这是因为文本节点比其他元素稍不明显。查看您的html：

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

你所看到的是预期的。这是因为文本节点比其他元素稍不明显。查看您的html：

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