javascript - 父级 DOM 元素中子级 DOM 元素的索引

Question

我正在寻找一种纯 JS 方法来查找子项在其父项中的偏移量。

鉴于以下示例:

<div>
A 
<br>
short space elapsed, <b>and</b> up into this noiselessness came Ahab alone from his cabin. 

<span>Taking a few turns on the quarter-deck, he paused to gaze over the side</span>
</div>

我会得到 3 个 child ，a br、b 和 span。每个都需要有一个相对于 div 开头的偏移量 - 因此，索引表示标签开头的 div 中有多少个字符。
因此 br 的偏移量为 2。

我最初的想法是获取 div 的所有子，然后以某种方式从中能够轻松获取索引。

Answer 1

function getChildrenOffset(parent){

        var childNodes = parent.childNodes;
        var childrenLocations = [];
        var offset = 0;
        var tagIndex = 0;

    for(var d = 0; d < childNodes.length; d++){

        var node = childNodes[d];



        if(node.tagName !== undefined){
            // This is a tag
            tagIndex += 1;

            var curLocation = new OffsetData(offset, tagIndex, node.tagName);
            childrenLocations.push(curLocation);

            offset += node.outerHTML.length;

        }else{
            // Just text
            offset += node.length;
        }
    }

    return childrenLocations;
}

function OffsetData(offset, index, tag){
    this.Offset = offset;
    this.Index = index;
    this.TagName = tag;
}