如何解决使用子节点更改文本
我一直在学习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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。