使用子节点更改文本

问题描述

我一直在学习javascript和childnodes。作为练习，我们必须通过使用父节点将列表项的文本切换为大写。

现在，似乎将javascript中的值添加到列表中，而不是更改它们。只需更改原始文本值即可。

我认为我已经很接近了，但是我得到了一些奇怪的结果（当我没有子节点时就不会发生这种情况）。这可能是次要的事情，但是我仍然感谢任何人看看！

javascript

addEventListener("load",init,false);

function init(){
    let span = document.getElementsByClassName("aantal");
    span[0].innerHTML = "3";

    let node = document.getElementsByClassName("list")[0].parentNode;
    node.firstChild.nodeValue = "ROOD";
    node.childNodes[1].nodeValue = "GROEN";
    node.childNodes[2].nodeValue = "BLAUW";

}

html

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8"/>
    <title>Slides Opdracht04</title>
    <link href="style/stijl.css" rel="stylesheet" />
    <script src="js/demo4.js"></script>
</head>
<body>
    <p>Kleuren</p>
    <ul>
        <li class="list">Rood</li>
        <li class="list">Groen</li>
        <li class="list">Blauw</li>
    </ul>
    <p>De lijst bevat <span class="aantal"></span> kleuren</p>
</body>
</html>

解决方法

在toUpperCase()上使用nodeValue功能

let node = document.getElementsByClassName("list")[0].parentNode;
let numChildNodes = node.childNodes.length;
for (var i = 0; i < numChildNodes; i++) {
    node.childNodes[i].nodeValue = node.childNodes[i].nodeValue.toUpperCase();
}

让我们仔细检查一下childNodes。

const childNodes = document.querySelector('#parent').childNodes

console.log('Total',childNodes.length)
console.log([...childNodes]
  .map(({ nodeType,textContent,nodeValue }) => ({ nodeType,nodeValue })))

<ul id="parent">
    <li class="list">Rood</li>
    <li class="list">Groen</li>
    <li class="list">Blauw</li>
</ul>

从输出中可以看到，#parent有7个childNodes，而不是您期望的3个。四个是“ nodeType：3”，这意味着它们是文本节点。如您所见，它们仅包含空格。其余3个是“ nodeType：1”，这意味着它们是HTML元素。这些是li个孩子。

设置节点nodeValue的{{1}} s时，实际上是在前两个空白文本节点加上一个0..2上设置它们。设置HTML元素的li是无操作的，因此将其忽略。因此，您得到：

nodeValue

child-nodes html javascript nodes