如何使用JavaScript定位嵌套在li标签内的DOM元素

核心实现方案 #

你提供的示例代码存在基础语法错误：DOM 方法是 getElementById（单数，末尾没有 s），修正后即可正常选中目标元素。以下是几种常用的选中方案： #

方案1：通过 id 直接选中（性能最高，最推荐）

如果 span 已经设置了唯一 id，直接用 id 匹配即可，修正后的可用代码如下：

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
// 修正 getElementById 拼写
var name = document.getElementById('name');
var index = document.getElementById('index');
var hometown = document.getElementById('hometown');
// 纯文本修改优先用 textContent，比 innerHTML 更安全，避免 XSS 注入风险
name.textContent = "姓名";
index.textContent = "序号";
hometown.textContent = "家乡";

方案2：无 id 时通过层级选择器匹配

如果 span 没有设置 id，可以通过父子层级关系匹配元素：

// 选中第一个 li 下的 span
const nameSpan = document.querySelector('ul li:first-child span');
// 选中第二个 li 下的 span
const indexSpan = document.querySelector('ul li:nth-child(2) span');
// 选中第三个 li 下的 span
const hometownSpan = document.querySelector('ul li:nth-child(3) span');

// 也可以批量选中所有 li 下的 span 再按索引操作
const allLiSpan = document.querySelectorAll('ul li span');
allLiSpan[0].textContent = "姓名";
allLiSpan[1].textContent = "序号";
allLiSpan[2].textContent = "家乡";

方案3：先选中 li 再查找内部 span

// 先获取所有 li 元素集合
const liList = document.getElementsByTagName('li');
// 从指定 li 内部查找 span 元素
const nameSpan = liList[0].querySelector('span');
nameSpan.textContent = "姓名";

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