本文介绍一下如何利用JavaScript获取li元素列表中的第n个li元素。
随着HTML5的出现，获取的手段也逐渐增多，下面分享一下其中的两种。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>JavaScript 获取第n个li元素 </title>
<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>
上面代码将第二个li元素字体颜色设置为蓝色，代码分析如下：
（1）.getElementsByTagName方法获取li元素集合，通过索引即可访问集合中对应的li元素。
（2）.索引值是从0开始计算的，也就是第一个li元素的索引是0，第二个是1，以此类推。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>JavaScript 获取第n个li元素 </title>
<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方法，检索能力更为强大。
1.《JavaScript 获取第n个li元素》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《JavaScript 获取第n个li元素》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/237.html