使用getElementById触发Uncaught TypeError错误，求原因解析

问题场景 #

尝试通过getElementById获取元素，ID输入正确，但触发错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getElementById')

相关代码：

HTML代码 #

<div class="optionRow">
    <label for="option1"> 
        <input class="option" type="radio" value="a" id="option1" name="option">
        Option 1 
    </label>
</div>

JavaScript代码 #

allOptions[1].document.getElementById('option1').innerHTML = data.a;
allOptions[2].document.getElementById('option2').innerHTML = data.b;
allOptions[3].document.getElementById('option3').innerHTML = data.c;

错误原因 #

1. allOptions数组元素为undefined
   你访问的allOptions[1]、allOptions[2]、allOptions[3]不存在或未正确初始化，值为undefined。当尝试读取undefined的document属性时，直接触发该类型错误。

2. DOM元素没有document属性
   即使allOptions的元素是有效的DOM节点，DOM元素本身也不具备document属性。getElementById是全局document对象的方法，无需通过某个DOM元素调用——且HTML规范中ID在整个文档内是唯一的，直接用document.getElementById('option1')即可。

3. 目标元素不支持innerHTML
   你要修改的<input>是自闭合标签，本身没有innerHTML属性，无法通过该属性修改内容。需要修改的是它的父标签<label>内的文本内容。

修正方案 #

首先确保allOptions正确获取到目标DOM元素，再调整代码逻辑：

// 正确获取所有.optionRow元素（注意数组索引从0开始）
const allOptions = document.querySelectorAll('.optionRow');

// 修改对应label的文本内容
allOptions[0].querySelector('label').textContent = `Option 1: ${data.a}`;
allOptions[1].querySelector('label').textContent = `Option 2: ${data.b}`;
allOptions[2].querySelector('label').textContent = `Option 3: ${data.c}`;

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