无法从getElementsByClassName访问HTMLCollection中的元素
无法从getElementsByClassName访问HTMLCollection中的元素
提问于 2018-06-09 06:16:49
我想从HTMLCollection中获取一个元素。document.getElementsByClassName的返回值正是我所期望的，但是当我尝试访问它的任何属性时，它看起来好像什么都没有。下面是我的代码(这段代码在我的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]我得到了回报：
<div class="CodeMirror-code">...</div>这正是我想要的，但这不是我在脚本中得到的结果。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-09 07:04:12
在调用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50769035
复制相关文章
相似问题