JavaScript获取ul中li个数的方法
本文介绍在JavaScript中统计无序列表ul内li元素数量的两种常用方法。通过结合getElementById获取父容器，再使用getElementsByTagName提取子元素集合，最终利用length属性获得具体个数。文章提供了分步实现与单行代码两种写法，并附带完整HTML及JS示例代码供参考。
本文详细介绍如何使用JavaScript统计无序列表（ul）中列表项（li）的数量，内容包含具体实现思路与代码示例，供开发者参考学习。
HTML结构示例
假设存在如下HTML结构：
<ul id="mycarousel">
<li><img src=01_MED.jpg height=80 width=100/></li>
<li><img src=02_MED.jpg height=80 width=100/></li>
<li><img src=03_MED.jpg height=80 width=100/></li>
<li><img src=04_MED.jpg height=80 width=100/></li>
</ul>
其中li标签的数量是动态变化的，现在需要通过JavaScript脚本准确获取当前li的总数。
获取li数量的实现方法
实现该功能的核心思路是将getElementById与getElementsByTagName方法结合使用，具体步骤如下：
temp = document.getElementById('mycarousel');
lis = temp.getElementsByTagName('li');
alert(lis.length); //显示li元素的个数
或者，也可以采用更简洁的单行写法直接获取结果：
lis = document.getElementById('mycarousel').getElementsByTagName('li').length;
alert(lis); //显示li元素的个数
如需进一步了解JavaScript相关知识，可参考本站系列教程：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述内容能帮助您更好地掌握JavaScript程序设计中的DOM元素计数技巧。
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54