Javascript 仅更改标签文本

Question

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

我认为 textContent 能够只更改 TEXT

document.getElementsByTagName('label')[0].textContent = "Hello World is replaced"

但是，textContent 替换了包括复选框在内的所有内容。有没有更好的方法来更改文本而不执行如下操作:

document.getElementsByTagName('label')[0].innerHTML = '<input type="checkbox" name="checkbox">Hello world is replaced';

Answer 1

您需要专门选择文本节点。

document.querySelector('label').childNodes[2].textContent = 'Hello World is replaced';

<div class="here_is_div">
    <label class="a_label">
            <input type="checkbox" name="checkbox">
            Hello world
    </label>
</div>

请注意，这里有 label 的 3 个子节点:label 和 input 之间的空格和换行符、 >input 本身，以及 Hello world 和周围的空白。