当我尝试 HTML DOM 时，就会出现这个难题。
为了简单起见，代码如下:
================================================== =======
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function jsTest()
{
var x = document.getElementById("fruits");
var y = x.childNodes[2].innerHTML;
alert(y);
}
</script>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<button onclick="jsTest()">TRY</button>
</body>
</html>正如您可以尝试的那样，当单击“TRY”按钮时，它会警告“未定义”，但为什么？
我尝试了以下修改:
(1)。 var y = x.childNodes[2].innerHTML; >>> var y = x.childNodes[1].innerHTML;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function jsTest()
{
var x = document.getElementById("fruits");
var y = x.childNodes[1].innerHTML;
alert(y);
}
</script>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<button onclick="jsTest()">TRY</button>
</body>
</html>这一次，它起作用了，并带有警报“Apple”。 类似的试验是将childNodes[1]更改为childNodes[0](结果:未定义)，childNodes[2](结果:未定义)，childNodes[3](结果:“Banana”)，childNodes[4](结果:未定义) )...
(2).我还尝试了“children[i]”而不是“childNodes[i]”，它工作正常(i=0 || 1 || 2 || 3 )!
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function jsTest()
{
var x = document.getElementById("fruits");
var y = x.children[2].innerHTML;
alert(y);
}
</script>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<button onclick="jsTest()">TRY</button>
</body>
</html><强>(3)。将所有“li”标签保留在一行中，不要换行，现在 childNode[i] (i=1 || 2 || 3 || 4) 可以正常工作!!
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function jsTest()
{
var x = document.getElementById("fruits");
var y = x.childNodes[3].innerHTML;
alert(y);
}
</script>
</head>
<body>
<ul id="fruits">
<li>Apple</li><li>Banana</li><li>Pear</li><li>Orange</li>
</ul>
<button onclick="jsTest()">TRY</button>
</body>
</html>备注:以上测试均在 Google Chrome/IE 11/Firefox/Opera/Win10 Edge 等浏览器中进行测试。
所以我的问题是: 在“li”元素上应用 childNodes[i] 函数时，这是否是一个“不成文的规则”？ 或者 这只是childNodes[i]函数的BUG吗？
我是一名中国自学者，学习时间约为2个月，恐怕我在这里提出的第一个问题太简单了，我尝试在这里和谷歌上搜索类似的问题，但失败了:(
无论如何，谢谢你的回答:)
最佳答案
更改:
var y = x.childNodes[2].innerHTML;
致:
var y = x.children[2].textContent;
最终代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function jsTest()
{
var x = document.getElementById("fruits");
var y = x.children[2].textContent;
alert(y);
}
</script>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<button onclick="jsTest()">TRY</button>
</body>
</html>关于javascript - HTML DOM : Why childNodes[i] cannot be correctly get for "<li>" elements when there are line breaks?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39377291/