百度编辑器 如何获取光标位置与不同帧内的节点

当我们打开控制台并输入`console.log(domUtils)`，屏幕上会展示出domUtils的众多方法，这些方法都是用来操作节点的。其中，`findParentByTagName()`方法的作用很明显，就是用来获取节点。当我们的光标停留在编辑器中的某个位置，而我们需要获取该位置外层节点的id以及其他属性时，就需要依赖domUtils来搜寻不同层级内的节点。

想象一下，你正在使用一款文本编辑器，你的光标在文章的某个部分闪烁。你想知道这个部分所在的HTML元素结构是什么样的，特别是外层节点的信息。这时，你可以通过domUtils的findParentByTagName()方法找到对应的节点。这个方法会在DOM树中向上查找，直到找到匹配标签名的父节点。一旦找到，你就可以轻松获取这个节点的id和其他属性。

让我们看一段代码：

```javascript

var range = editor.selection.getRange(); // 获取当前光标的范围

var td = domUtils.findParentByTagName(range.startContainer, 'td', true); // 查找外层节点是否为td标签

```

通过这段代码，我们可以找到光标当前位置的外层节点是否是`td`标签，并获取其属性。这对于开发人员来说非常有用，特别是当你在处理复杂的编辑器内容时。

而且，这些节点的父节点可以在DOM结构中逐层查找，你可以依次向上查找，直到找到你需要的属性。想象一下，你在使用某个插件时，它的弹出层可以实时显示你当前选中的DOM节点的详细信息，包括其id和其他属性。

`cambrian.render('body')`这行代码可能是用来渲染页面的body部分，通过domUtils或者其他工具来操作或修改页面的内容。domUtils提供了一系列强大的工具，让我们能够轻松地操作和获取DOM节点信息。