javascript - 无法从 getElementsByClassName 访问 HTMLCollection 中的元素

Question

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

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

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

这里有两个选项：

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

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

Answer 2

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

因此，您不能简单地等待各种 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>