如何在一个contenteditable div中获取插入符号位置元素的索引

Question

让我们说我有一个可信的div，其中也有一些元素

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

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

divNode = document.querySelector('div');
spanIndex = //get the index of span element 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>