Невозможно получить доступ к элементам в HTMLCollection из getElementsByClassName

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

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>

Answer 2

Возможно, вы делаете этот код до того, как элементы будут отображены на экране.Вот почему, когда вы делаете это в консоли, это работает.

Здесь есть два варианта:

• Попробуйте изменить код js на onload тела.Если вы не знаете, что такое onload, проверьте это: https://www.w3schools.com/Jsref/event_onload.asp

• Попробуйте изменить код js, чтобы он появлялся при появлении прослушивателя DOMContentLoaded.Узнайте, как это работает здесь: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded