無法從getElementsByClassName訪問HTMLCollection中的元素

Question

我想從HTMLCollection中獲取一個元素。 document.getElementsByClassName的返回正是我所期待的，但是當我嘗試訪問它的任何屬性時，它看起來就像什么都沒有。 這是我的代碼（此代碼在.js文件中運行，我src到我的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身體。 如果您不知道onload是什么，請查看： https ： //www.w3schools.com/Jsref/event_onload.asp

• 嘗試在DOMContentLoaded偵聽器啟動時更改js代碼。 在這里了解它是如何工作的： https ： //developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 2

CodeMirror增加了它的各種DOM元素的后DOM CodeMirror()調用構造函數或之后CodeMirror.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>