使用子节点更改文本
[英]Using childnodes to change text
问题描述
I've been learning about javascript and childnodes.
我一直在学习 javascript 和子节点。 For an exercise, we have to switch the text of listitems to uppercase through the use of a parent node.作为练习，我们必须通过使用父节点将列表项的文本切换为大写。
Right now, it seems to add the values in javascript to the list, instead of changing them.现在，它似乎将 javascript 中的值添加到列表中，而不是更改它们。 It only needs to change the original text value.它只需要更改原始文本值。
I think I'm pretty close but I get some odd results (this doesn't happen when I do it without childnodes).我想我已经很接近了，但是我得到了一些奇怪的结果（当我没有子节点时，这不会发生）。 It's probably something minor, but I still appreciate anyone giving it a look!这可能是一件小事，但我仍然感谢任何人来看一看！
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 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>
2 个解决方案
解决方案1
2 2020-08-18 15:13:07
Use the toUpperCase() function on the nodeValue在nodeValue上使用toUpperCase() function
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(); }
解决方案2
2 已采纳 2020-08-18 16:18:31
Let's examine those childNodes more closely.让我们更仔细地检查这些childNodes 。
const childNodes = document.querySelector('#parent').childNodes console.log('Total', childNodes.length) console.log([...childNodes].map(({ nodeType, textContent, nodeValue }) => ({ nodeType, textContent, nodeValue })))
<ul id="parent"> <li class="list">Rood</li> <li class="list">Groen</li> <li class="list">Blauw</li> </ul>
As you can see from the output, #parent has 7 childNodes , not 3 as you might expect.从#parent可以看出，#parent 有 7 个childNodes ，而不是您预期的 3 个。 Four are "nodeType: 3", which means they're text nodes.四个是“nodeType：3”，这意味着它们是文本节点。 As you can see, they contain only whitespace.如您所见，它们只包含空格。 The remaining 3 are "nodeType: 1", which means they're HTML elements.剩下的 3 个是“nodeType: 1”，这意味着它们是 HTML 个元素。 These are the li children.这些是li的孩子。
When you set the nodeValue s of nodes 0..2 , you're actually setting them on the first 2 whitespace text nodes plus one of the li s.当您设置节点0..2的nodeValue s 时，您实际上是在前 2 个空白文本节点加上li之一上设置它们。 Setting the nodeValue of an HTML element is a no-op, so that one is ignored.设置 HTML 元素的nodeValue是空操作，因此会被忽略。 Thus, you get:因此，你得到：
[0] WHITESPACE => "ROOD"
[1] <li>Rood</li> => "GROEN" # no-op - nothing happens
[2] WHITESPACE => "BLAUW"
# other elements at indexes > 2 - out of scope, nothing happens
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.