第十一天 dom节点的查找

题目描述:

查找两个节点的最近的一个共同父节点,可以包括节点自身

输入描述:

oNode1 和 oNode2 在同一文档中,且不会为相同的节点

解题想法:

第一眼看到这个题目的时候,以为是根据题目直接找dom最近的一个根节点,事实上这道题目的要求也是这样的,所以这道题目其实很简单,找到两个节点的父节点,输出即可,所以我使用了while循环判断来做这道题目

function commonParentNode(oNode1, oNode2) {
    while(true){
        oNode1=oNode1.parentNode;
        if(oNode1.contains(oNode2)){
            return oNode1;
        }
    }
}

代码思路解析:

使用while循环判断,首先获取节点1的父节点,找到节点1 的父节点之后,进行判断,如果发现节点1的父节点和节点2的关系是包含的关系,那么就可以肯定节点1和节点2有一个共同的父节点,这个时候只需要返回父节点即可;while循环的目的是不断地循环,不断地向上迭代,判断节点1的父节点或者祖先节点中是否包含节点2,如果最终没有发现节点2被包含在节点1中,那么就会返回null

代码知识点补充:

在写代码的过程中,发现对于contains格外的陌生,下面回忆一下contains的用法(参考了其他的资料)

contains很简单,就是判断集合中是否包含指定的元素

第二种解题思路:

除了单纯的使用while以外,能否使用递归的思想呢?

function commonParentNode(oNode1, oNode2) {
    oNode1=oNode1.parentNode;
    oNode2=oNode2.parentNode;
    if(oNode1 === oNode2){
        return oNode1;
    }else
    {
        commonParentNode(oNode1,oNode2)
    }
}

事实证明迭代的方法是可以使用的,但是因为是迭代,所以会发现他的时间效率很低,所以不建议使用

代码解析思路:

迭代和前面的很相似,所以就不过多赘述

上一篇:2022年全球前列地尔原料药行业市场现状及发展前景预测


下一篇:DOM-创建元素的三种方式