无法从 getElementsByClassName 访问 HTMLCollection 中的元素

Question

我想从 HTMLCollection 中获取一个元素。 document.getElementsByClassName 的 return 正是我所期待的，但是当我尝试访问它的任何属性时，看起来那里什么也没有。这是我的代码（此代码是运行在我 src 到我的 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]

我得到 return:

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

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

Answer 1

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

这里有两个选项：

尝试更改 js 代码以发生 onload 的正文。如果您不知道 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() 构造函数或调用 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>

无法从 getElementsByClassName 访问 HTMLCollection 中的元素

Unable to access elements in HTMLCollection from getElementsByClassName

html

javascript

htmlcollection