OK I am selecting a li from its ul. This code works when used with getElementById.
<html>
<head>
<script>
function myFunction() {
document.getElementById("list").children[1].style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<button onclick="myFunction()">Try it</button>
</body>
</html>
But stops working when used with getElementsByClassName
<html>
<head>
<script>
function myFunction() {
document.getElementsByClassName("list").children[1].style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Please help. Thank you.