Question

我正在研究处理节点的练习。我应该替换字符串的第一个子元素和第二个元素。第一个孩子，将“这是”改为“非常”，但将“特殊”改为“普通”似乎不起作用。有人会向我解释这个吗？

<html>
<head>
<title>Page Title</title>
<style>
.red { color : #FF0000 }
.big { font-size: xx-large }
</style>
<script type='text/javascript'>
function f(){
    node=document.getElementById('i1');
    node.firstChild.nodeValue='Very ';
    node.childNodes[1].nodeValue=" ordinary ";
}
</script>
</head>
<body class='big'>
<h5>Making changes</h5>
<p id='i1'>This is <em>special</em> <span class='red'>text</span>.</p>
<p onclick='f();'>Click to change the paragraph</p>
</body>
</html>

Answer 1

您正在尝试设置HTMLElement的nodeValue。 You cannot do this as the nodeValue for an HTMLElement (your em element) is null

您需要设置textContent，innerText或innerHTML。

node.childNodes[1].textContent = " ordinary ";

为什么这适用于node＆＃39; firstChild（更改＆＃34;这是＆＃34;到＆＃34;非常＆＃34;）？它是textNode，因此您可以获取并设置其nodeValue。

Answer 2

这里你正在调用chillNodes [1]，所以它是列表chillNodes中的第二个元素。要获得第一个孩子，您应该致电chillNodes[0]。

http://www.w3schools.com/jsref/prop_node_childnodes.asp

Answer 3

你必须这样做：

<html>
<head>
<title>Page Title</title>
<style>
.red { color : #FF0000 }
.big { font-size: xx-large }
</style>
<script type='text/javascript'>
function f(){
    node=document.getElementById('i1');
    node.firstChild.nodeValue='Very ';
    node.childNodes[1].childNodes[0].nodeValue=" ordinary ";
}
</script>
</head>

因为<em>是另一个孩子。（https://jsfiddle.net/h8vmf0d6/）

无法访问HTML中的子节点

3 个答案: