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代码更改为正文<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> <input v-model="value"> </div> <button>Change value via jQuery listener</button>。如果您不知道onload是什么，请查看：https://www.w3schools.com/Jsref/event_onload.asp
尝试更改js代码，以便在onload侦听器启动时发生。了解其工作原理：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 2

在调用CodeMirror()构造函数或调用CodeMirror.fromTextArea()之后，CodeMirror将各种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

2 个答案: