getElementById返回null？

Question

getElementById返回null？

javascriptgetelementbyid

66

document.getElementById('definitely exists 的 div 的 id') 返回 null。

我最初是在最后加载 JavaScript，以确保无需担心 onload 事件。我还尝试使用 onload 事件，但这很麻烦。有什么想法或帮助将不胜感激。

- Sheena

4

为什么jQuery或getElementById等DOM方法找不到元素？ - Bergi

1

我曾经遇到过类似的情况，我的内容是动态生成的，查询 ID 的脚本在创建具有该 ID 的内容的脚本之前被调用了。我调整了顺序，问题得到了解决。 - Sudip Bhandari

3

请确保只写出ID名称，不要在ID前面加上#符号。 - Usce

对于像我这样遇到这个问题的人，经过多次尝试，我发现在使用window.onload=myFunction()时，使用getElementById()返回了null，但是当我使用<body onload="myFunction()">时却没有。 - Astrolamb

1

当我意外地将JavaScript加载在文档顶部而不是在底部等待HTML加载完成后，通常会发生这种情况。 - James Hubert

3个回答

66

这可能由以下原因引起：

无效的HTML语法（某个标签未关闭或类似错误）
重复的ID - 有两个具有相同ID的HTML DOM元素
你尝试按ID获取的元素是动态创建的（通过ajax加载或由脚本创建）吗？

请发布您的代码。

- PanJanek

28

实际上不会返回null，而是返回具有该ID的两个元素中的第一个元素。 - Bergi

2

#1 可能就像元素需要开放和闭合标签那样微妙，例如：<datalist id="foo" /> 和 <datalist id="foo"></datalist>。 - ebyrob

对我来说，有一个脚本错误在测试时从控制台中清除。在错误被修复之前，我无法获取该ID。 - rearThing

13

document.getElementById不能正常工作的原因可能有很多：

您使用的ID无效

ID和NAME标记必须以字母（[A-Za-z]）开头，并且可以跟随任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。 (资源: HTML中ID属性的有效值是什么？)
您将某个ID用作了标题中的<meta>名称（例如版权、作者等）。这看起来很奇怪，但我也遇到过这种情况：如果您正在使用IE，请参阅 (资源: http://www.phpied.com/getelementbyid-description-in-ie/)
您正在定位帧或iframe内部的元素。在这种情况下，如果iframe加载了与父页面相同域内的页面，则应在查找元素之前定位contentdocument (资源: 在框架内调用特定ID)
当节点没有在DOM中有效加载时，您只是查看元素，或者可能只是拼写错误。

我怀疑您没有将相同的ID用两次或更多次：在这种情况下，document.getElementById至少应返回第一个元素。

- Fabrizio Calderan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cameron · Accepted Answer

同时要注意如何在页面上执行js。例如，如果您执行以下操作：

(function(window, document, undefined) {
  
  var foo = document.getElementById("foo");
  
  console.log(foo);

})(window, document, undefined);

由于调用文档时它尚未加载，因此这将返回null。

使用window.onload等待DOM节点加载：

(function(window, document, undefined) {

  // code that should be taken care of right away

  window.onload = init;

  function init(){
    // the code to be called when the dom has loaded
    // #document has its nodes
  }

})(window, document, undefined);