JavaScript 获取第n个li元素

本文介绍一下如何利用JavaScript获取li元素列表中的第n个li元素。
随着HTML5的出现，获取的手段也逐渐增多，下面分享一下其中的两种。
代码实例如下：

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.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>51前端一</li>
    <li>51前端二</li>
    <li>51前端三</li>
    <li>51前端四</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.51qianduan.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>51前端一</li>
    <li>51前端二</li>
    <li>51前端三</li>
    <li>51前端四</li>
  </ul>
</body>
</html>

实现了同样的效果，将第二个li元素字体颜色设置为蓝色。
上述采用的是HTML5新增的querySelector方法，检索能力更为强大。

代码描述：JavaScript 获取第n个li元素。JavaScript 获取第n个li元素

下载全部收藏

908 1211

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

热搜关键词

JavaScript 获取第n个li元素

offsetwidth与style.width区别

animation与transition区别

CSS position:sticky与position:fixed区别

html标签的尖括号转码为字符实体

设置链接<a>的尺寸

position:sticky定位元素是否在同一父元素中区别