获取一个元素的子节点索引，该元素的插入符号位置到它的 contenteditable 父元素答案

【问题标题】：Get the child node index of an element having the caret position to its contenteditable parent element获取一个元素的子节点索引，该元素的插入符号位置到它的 contenteditable 父元素
【发布时间】：2017-04-22 17:38:17
【问题描述】：

现在我之前问过这个问题，它被标记为与这个问题重复Get caret position in contenteditable div including tags 但实际上它完全不同。

假设我有一个内容可编辑的 div，其中也有一些元素

<div id="text" contenteditable="true"><b>abc</b><nav>def</nav><span>ghi</span></div>

现在，如果光标或插入符号的位置在 span 元素内，我如何获取 span 元素的索引作为其父元素 div 的子节点。所以我可以得到这个结果

divNode = document.querySelector('div');
caretEle = //get the caret position element which will be span
spanIndex = //probably divNode.indexOf(caretEle) which will be = 2
caretEle = divNode.childNodes[spanIndex];

注意：我不是在寻找插入符号位置，我想将插入符号位置元素的子索引获取到其父元素。即我想获取<span>元素的子索引到<div id="text" contenteditable="true">

例如：

node = document.getElementById('text');
node.childNodes[0] == <b>
node.childNodes[1] == <nav>
node.childNodes[2] == <span>

【问题讨论】：

没有简单的方法，但是您可以在每个父级上执行类似 [].indexOf.call(node.parentNode.children, node) 的操作，可能在其中一个 while( node=node.parentNode) 循环中
你知道插入符跨度是 div 的子元素吗？是否可以在作为 div 的子元素的
中？
@Alan 是的，它是 div 的子元素，不在 <p> 元素中
好的，那么基本上就像@dandavis 说的那样可以工作。或者遍历 previousSibling 直到你点击 null。
你有这个问题的有效解决方案吗？

标签： javascript jquery parent-child contenteditable caret

【解决方案1】：

var s = window.getSelection();
var an = s.anchorNode;
var fn = s.focusNode;

anchorNode 是选择开始的地方，而focusNode 是选择结束的地方。非常要记住anchorNode 是用户最初开始选择的位置，所以如果他们从右到左选择，anchorNode 将是在右侧，而如果他们从左到右选择文本，anchorNode 将在 left 一侧。

【讨论】：