如何通过ID在JavaScript中访问HTML无序列表的指定列表项

嘿，这事儿其实很容易搞定，有两种最常用且可靠的方法能直接获取到对应ID的列表项元素，我给你详细说说：

方法1：使用document.getElementById() #

这是专门为通过ID查找元素设计的API，因为页面里的ID是唯一的，它会直接返回匹配的单个元素，效率很高。

示例代码：

// 获取id为"first"的列表项
const firstListItem = document.getElementById('first');

// 拿到元素后你可以做各种操作，比如修改文本内容
firstListItem.textContent = '更新后的第一个元素';

方法2：使用document.querySelector() #

这个方法支持所有CSS选择器语法，所以你可以用ID选择器（#加上ID名称）来定位元素，同样因为ID的唯一性，它也会直接返回单个元素。

示例代码：

// 获取id为"second"的列表项
const secondListItem = document.querySelector('#second');

// 比如给元素添加样式
secondListItem.style.fontWeight = 'bold';

小提示 #

因为HTML规范要求ID在整个页面中是唯一的，所以上面两种方法都只会返回你要找的那个列表项，不用像处理类选择器那样遍历集合，直接用返回的元素就行~

内容的提问来源于stack exchange，提问作者Prasad Walke