Javascript 无法从getElementsByClassName访问HTMLCollection中的元素

我想从HTMLCollection中获取一个元素。document.getElementsByClassName的返回正是我所期望的，但是当我尝试访问它的任何属性时，看起来好像什么都没有。这是我的代码（此代码在一个.js文件中运行，我将其src到我的index.html中）：

以下是控制台日志：

HTMLCollection(1)
   0: div.CodeMirror-code        //this is the div I want to access
   length: 1
   __proto__: HTMLCollection
undefined
0

此外，如果我在控制台中输入：

var code = document.getElementsByClassName('CodeMirror-code');
code[0]

我得到回报：

<div class="CodeMirror-code">...</div>

。。。

---

这正是我想要的，但这不是我在脚本中得到的结果

在屏幕上呈现元素之前，您可能正在执行此代码。这就是为什么当您在控制台中执行此操作时，它会起作用

这里有两个选项：

• 尝试将js代码更改为body的onload。如果您不知道什么是

  onload

  ，请查看以下内容：

• 尝试在出现

  DOMContentLoaded

  侦听器时更改js代码。在此了解其工作原理：

---

CodeMirror在调用

CodeMirror（）

构造函数或调用

CodeMirror.fromTextArea（）

之后，将其各种DOM元素添加到DOM中

因此，您不能简单地等待各种DOM就绪事件来查找您要查找的元素。您可以向构造函数传递一个函数，然后手动将编辑器添加到DOM中，然后执行搜索。或设置自定义CodeMirror事件侦听器

代码镜像初始化钩子

CodeMirror.defineInitHook(function(cmInstance){
  var codeDiv = document.querySelector('.CodeMirror-code');
  console.log(codeDiv);
});
var myCodeMirror = CodeMirror(document.body);

代码镜像手动添加

var myCodeMirror = CodeMirror(function(editor){
  //add the editor to the DOM
  document.body.appendChild(editor);

  var codeDiv = document.querySelector('.CodeMirror-code');
  //either of these will work
  var codeDiv = editor.querySelector('.CodeMirror-code');

  console.log(codeDiv);
});

演示

codemirr.defineInitHook（函数（cmInstance））{
DoWork（document.querySelector（'.CodeMirror code'）；
});
var mycodemiror=CodeMirror（document.body）；
功能DoWork（codeDiv）{
console.log（codeDiv）；
}

或者在DOM完全加载之前执行脚本（脚本位于文档的头部，没有附加DOMContentLoaded事件）我在问题中添加了更多的上下文，不幸的是，我是在现有项目的基础上构建的，我不知道何时/如何添加div，但我知道DOM是加载的，因为这是当函数被调用时，dlet code=[…code]将集合包装在一个数组中。通常最好在body标记上使用DOMContentLoaded事件，而不是onLoad。好的，我会添加它。@user3210641更好吗？谢谢你的帮助！我只是在这个问题上添加了更多的上下文，这段代码是否在DOMContentLoadedHmm上运行@这是真正的代码中的

）

吗？谢谢，这正是我要找的。我只是对CodeMirror不太熟悉。非常感谢。

var myCodeMirror = CodeMirror(function(editor){
  //add the editor to the DOM
  document.body.appendChild(editor);

  var codeDiv = document.querySelector('.CodeMirror-code');
  //either of these will work
  var codeDiv = editor.querySelector('.CodeMirror-code');

  console.log(codeDiv);
});