函数中getElementById返回Null：DOM元素ID参数传递问题排查

阿华AIGC实验室

2026-5-15

问题分析与解决方案

我来帮你排查一下问题所在，其实是两个小细节出错了：

1. 函数内的字符串引号误用

你在函数里写了document.getElementById('elem')，这里的'elem'是固定字符串，意味着你一直在尝试获取**id为"elem"**的元素，但你的DOM里根本没有这个元素，所以自然返回null。正确的做法是使用传入的参数变量elem，而非把它当成字符串：

var idElements = document.getElementById(elem); // 去掉elem的引号，使用参数变量

2. 函数调用时的参数类型错误

你调用函数时写了children(table)和children(ol)，这里的table和ol是未声明的变量，浏览器会把它们当成全局变量查找，找不到的话会抛出ReferenceError（部分旧浏览器可能有自动映射DOM元素的非标准特性，但不推荐依赖）。正确的做法是传入字符串形式的id值：

children('table'); // 传入字符串格式的id
children('ol');    // 同理传入ol的id字符串

修正后的完整代码

<body>
  <table id="table">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
  <ol id="ol">
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
  </ol>
  <script>
    function children(elem) {
      var idElements = document.getElementById(elem);
      console.log(idElements);
    }
    children('table');
    children('ol');
  </script>
</body>

这样修改后，控制台就能正确输出对应的table和ol元素了。

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