JS获取li的方法

在JavaScript开发中，获取页面中的li元素是一项常见的操作。掌握有效的获取li的方法，能够帮助开发者更高效地进行页面交互和功能实现。

通过document.querySelectorAll方法获取

document.querySelectorAll是一个非常强大的方法，它可以通过CSS选择器来获取元素。如果要获取所有的li元素，只需使用document.querySelectorAll('li') 。这个方法会返回一个NodeList对象，包含了页面中所有匹配li选择器的元素。例如：

const lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
    console.log(lis[i].textContent);
}

若只想获取特定父元素下的li元素，也很简单。比如有一个id为“myList”的ul，要获取其中的li，可以使用document.querySelectorAll('#myList li') 。

使用getElementsByTagName方法

getElementsByTagName是比较传统的获取元素的方法。同样以获取所有li元素为例，使用document.getElementsByTagName('li') ，它会返回一个HTMLCollection对象，包含了所有匹配的li元素。代码示例如下：

const lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
    lis[i].style.color ='red';
}

不过需要注意的是，HTMLCollection是一个实时集合，当页面结构发生变化时，它会自动更新。

通过class获取li元素

当给li元素添加了特定的class时，可以利用class来获取。先使用document.getElementsByClassName获取具有特定class的元素集合，然后从中筛选出li元素。例如，给一些li添加了“special-li”的class，获取这些li的代码如下：

const allElements = document.getElementsByClassName('special-li');
const lis = [];
for (let i = 0; i < allElements.length; i++) {
    if (allElements[i].tagName === 'LI') {
        lis.push(allElements[i]);
    }
}

在实际开发中，根据具体需求合理选择获取li元素的方法。如果需要精确匹配和使用CSS选择器的灵活性，document.querySelectorAll是不错的选择；而对于简单直接获取所有li元素，getElementsByTagName可能更高效；当通过class来筛选li时，上述的方法可以满足需求。熟练掌握这些方法，能让我们在处理列表相关的交互和功能时更加得心应手。