在JavaScript中,获取<ul>
元素下面<li>
的数量可以通过多种方式实现。以下是几种常见的方法:
querySelectorAll
querySelectorAll
方法返回文档中匹配指定 CSS 选择器的所有元素节点。
const ul = document.querySelector('ul'); // 获取第一个<ul>元素
const lis = ul.querySelectorAll('li'); // 获取该<ul>下所有的<li>元素
const count = lis.length; // 获取<li>的数量
console.log(count);
children
children
属性返回一个元素的子元素集合(仅包含元素节点,不包括文本节点等)。
const ul = document.querySelector('ul'); // 获取第一个<ul>元素
const lis = ul.children; // 获取该<ul>下所有的<li>元素
const count = lis.length; // 获取<li>的数量
console.log(count);
getElementsByTagName
getElementsByTagName
方法返回带有指定标签名的对象集合。
const ul = document.querySelector('ul'); // 获取第一个<ul>元素
const lis = ul.getElementsByTagName('li'); // 获取该<ul>下所有的<li>元素
const count = lis.length; // 获取<li>的数量
console.log(count);
querySelector
和 nextElementSibling
这种方法适用于遍历特定<ul>
下的所有<li>
元素。
function countLiInUl(ulId) {
let count = 0;
const ul = document.getElementById(ulId);
let li = ul.firstElementChild;
while (li) {
if (li.tagName === 'LI') {
count++;
}
li = li.nextElementSibling;
}
return count;
}
const ulId = 'myUl'; // 假设<ul>的id为'myUl'
const count = countLiInUl(ulId);
console.log(count);
<li>
数量。<ul>
元素存在且正确加载。<ul>
元素,需要指定获取哪一个<ul>
下的<li>
数量。通过上述方法,你可以有效地获取并处理<ul>
元素下的<li>
数量。
领取专属 10元无门槛券
手把手带您无忧上云