mike652638 mike652638 - 2 months ago 7
HTML Question

HTML DOM: Why childNodes[i] cannot be correctly get for "<li>" elements when there are line breaks?

The puzzle occurs when I am trying HTML DOM.

To make it simple, the code is as following:

======================================================



<!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>





As you can try, when clicking the "TRY" button, it alerts "undefined", but why ?

I have tried the following modifications:

(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>





This time, it works, with alert "Apple".
Similar trials are to change childNodes[1] to childNodes[0] (Result: undefined), childNodes[2] (Result: undefined), childNodes[3] (Result: "Banana"), childNodes[4] (Result: undefined)...

(2).I also tried "children[i]" instead of "childNodes[i]", it works fine (i=0 || 1 || 2 || 3 )!

For example:



<!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). Keep all the "li" tags in one line without line breaks, it works normally now for childNode[i] (i=1 || 2 || 3 || 4) !!

For example:



<!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>





Remark: All the tests above are tried out in Google Chrome/ IE 11/ Firefox/ Opera/ Win10 Edge, etc.

So my question is:
Is it somehow an "Unwritten Rule" when applying childNodes[i] function on "li" elements ?
OR
Is it just a BUG for childNodes[i] function ?


I am a Chinese self-learner with learning period around 2 months, I'm afraid this 1st question I raised here is just too simple, I've tried in searching for similar questions here and on Google, but failed :(

Thanks for your answers anyway :)

Answer

Change :

var y = x.childNodes[2].innerHTML;

To :

var y = x.children[2].textContent;

Final code :

<!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>

Comments