我来帮你梳理下这个问题的核心原因和解决办法，你遇到的情况其实是CKEditor开发里的常见坑～

核心原因：CKEditor的编辑区域在独立iframe中 #

直接用document.getElementsByClassName('rk_section')找不到元素，是因为CKEditor默认会把编辑内容放在一个独立的iframe里，你在控制台执行的命令是针对主页面的document，而目标span是在编辑器内部的iframe文档里，两个上下文完全独立，所以返回空数组是正常的。

正确的查找方式 #

1. 先获取正确的编辑器实例 #

首先要确保你拿到了目标编辑器的实例，比如通过编辑器ID获取：

// 替换成你的编辑器实际ID
var editor = CKEDITOR.instances.yourEditorId;

2. 访问编辑器内部的文档上下文 #

有两种方式可以拿到编辑器内部的文档：

• 方式一：用CKEditor的API获取内部DOM文档对象

  var editorDoc = editor.document.$; // 这里的$是CKEditor元素转原生DOM的标识
  // 现在用这个editorDoc来查找元素
  var targetSpans = editorDoc.getElementsByClassName('rk_section');
  console.log(targetSpans); // 现在应该能找到目标span了
  

• 方式二：直接用CKEditor的选择器API（更推荐，适配性更好）
  CKEditor提供了自己的DOM查询方法，不用直接操作原生DOM：

  // 用CSS选择器查找，返回CKEditor元素集合
  var ckElements = editor.document.find('.rk_section');
  // 如果需要转成原生DOM元素，可以遍历转换
  var domElements = ckElements.toArray().map(el => el.$);
  console.log(domElements);
  

3. 确保代码执行时机正确 #

还要注意，必须等编辑器完全加载完成后再执行查找代码，否则可能内容还没渲染出来。可以通过instanceReady事件来绑定逻辑：

CKEDITOR.on('instanceReady', function(evt) {
  var editor = evt.editor;
  // 编辑器加载完成后再执行查找
  var sections = editor.document.find('.rk_section');
  console.log('找到的元素数量：', sections.count());
});

额外排查点 #

如果还是找不到，你可以检查这几点：

• 确认目标span确实已经插入到了编辑器的内容中（可以在编辑器的源码模式里查看）
• 检查类名是否拼写正确，有没有空格或大小写错误（类名是区分大小写的）
• 如果是动态添加的span，要确保在添加完成后再执行查找代码

内容的提问来源于stack exchange，提问作者Twitch