題目一：
JavaScript 獲取第n個li元素
下面有兩種方法
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
ul{list-style:none}
</style>
<script>
window.onload=function(){let lis=document.getElementsByTagName("li");lis[1].style.color="blue";
}
</script>
</head>
<body><ul><li>第一行</li><li>第二行</li><li>第三行</li><li>第四行</li></ul>
</body>
</html>
代碼分析如下：
- getElementsByTagName方法獲取li元素集合，通過索引即可訪問集合中對應的li元素。
- 索引值是從0開始計算的，也就是第一個li元素的索引是0，第二個是1，以此類推。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
ul{list-style:none}
</style>
<script>
window.onload=function(){let li=document.querySelector("li:nth-child(2)");li.style.color="blue";
}
</script>
</head>
<body><ul><li>第一行</li><li>第二行</li><li>第三行</li><li>第四行</li></ul>
</body>
</html>
實現了同樣的效果，將第二個li元素字體顏色設置為藍色。
上述采用的是HTML5新增的querySelector方法，檢索能力更為強大。
關于querySelector方法用法參閱querySelector()
方法。
關于方法中的選擇器參閱CSS E:nth-child(n)一章節。
)
)
)
)
