Skip to main content

判断当前节点是其父元素的第几个节点

tip

考察DOM API的熟悉程度，以及解决业务场景的思路

一、题意​

写一个函数返回当前节点是其父元素的第几个节点

function getNodeIndex(node){ 
    let index = 0; 
    
    return index; 
}

二、解法​

Element API​

高效获取，性能最优

利用Element的API - previousElementSibling，可以获取到当前元素在其父元素的子元素节点中的前一个元素节点。如果该元素已经是第一个元素节点，则返回null。

function getNodeIndex(node){ 
    let index = 0; 

    while((node = node.previousElementSibling) !== null){
        index++;
    }
    return index; 
}
为什么不用`previousSibling`？

Node.firstChild 和 Node.previousSibling之类的方法获取到的节点，有可能是文本节点(text)，不一定都是元素节点。

for循环遍历​

因为每次都是从第一子节点开始遍历，性能并非最优

function getNodeIndex(node){ 
    let index = 0; 

    const parentNode = node.parentNode;
    for(let i = 0; i < parentNode.children.length; i++){
        if(node == parentNode.children[i]){
            break;
        }
        index++;
    }
    return index; 
}

泛型方法​

for循环的变通实现，实际应用泛型方法，是加分点

function getNodeIndex(node){ 
    let index = 0; 

    index = Array.prototype.indexOf.call(node.parentNode.children, node);
    
    return index; 
}

参考​

Last updated on