我想从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>
这正是我想要的,但这不是我在脚本中得到的结果。
发布于 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>
https://stackoverflow.com/questions/50769035
复制相似问题