Javascript - 一般仅替换文本

Question

我只想替换给定元素的文本，它应该是它自己的函数。

例如，像这样:

<div id="thisDivIsGettingTargeted">
    <span>
        Edit me!
        <i class="fas fa-edit"></i>
    </span>
</div>

应替换为:

<div id="thisDivIsGettingTargeted">
    <span>
        Oh yeah
        <i class="fas fa-edit"></i>
    </span>
</div>

它并不总是第一个 child ，所以我不能使用 firstChild。

我真的不知道如何实现这一目标。我必须搜索最低元素并更改其文本，但在本例中，它总是找到 i 标记。

这就是我写的函数。

const get_object = element => {
    if (!element.hasAttribute("data-liner-stop-search") && element.childElementCount === 1){
        return get_object(element.firstElementChild)
    }
    return element
};

这是另一个例子:

<span class="text-one-liner">
    <span class="name">
        Username
        <span data-tooltip="A tooltip">
            <i class="fas fa-crown"></i>
        </span>
    </span>
</span>

.text-one-liner 已被定位，“用户名”应更改。

Answer 1

您可以通过过滤 nodeType 属性来完成此操作。请注意，用于格式化代码的空格也显示为子节点。您可能也想过滤这些内容，如下面的示例所示 (node.nodeValue.trim() !== "")。

document.querySelector('#thisDivIsGettingTargeted span').childNodes.forEach((node) => {
  if(node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "") {
    node.nodeValue = "new text";
  }
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div id="thisDivIsGettingTargeted">
    <span>
        Edit me!
        <i class="fas fa-edit"></i>
    </span>
</div>