无法从 getElementsByClassName 访问 HTMLCollection 中的元素

Question

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

document.addEventListener('DOMContentLoaded', function () {
    var code = document.getElementsByClassName('CodeMirror-code');
    console.log(code);
    console.log(code[0]); //undefined
    console.log(code.length); //0
}

这里是控制台日志：

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>

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

Answer 1

CodeMirror 在调用CodeMirror() 构造函数或调用CodeMirror.fromTextArea() 之后将其各种DOM 元素添加到DOM。

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

CodeMirror 初始化钩子

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

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);
});

演示

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

function DoWork(codeDiv){
  console.log(codeDiv);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.js"></script>

Answer 2

您可能在元素呈现在屏幕上之前执行此代码。这就是为什么当您在控制台中执行此操作时它可以工作的原因。

这里有两个选项：

• 尝试更改js代码以发生onload的body。如果您不知道 onload 是什么，请查看：https://www.w3schools.com/Jsref/event_onload.asp

• 尝试更改 js 代码以在 DOMContentLoaded 侦听器出现时发生。在此处了解其工作原理：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded