如何通过递归获取页面目标节点的父节点首先是拿到页面所有节点。通过document.querySelector('#bod

如何通过递归获取页面目标节点的父节点？

首先是拿到页面所有节点。通过document.querySelector('#body');获取到所有子节点。

拿到所有页面节点后，如何寻找目标节点呢？根据nodeType获取节点的类型，详细参照：HTML DOM nodeType 属性 www.w3school.com.cn/jsref/prop_…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过递归获取页面目标节点的父节点 -->
    <div id="body">
        <div>header</div>
        <div id="content">
            <div>
                目标上级
                <div id="goal" class="">
                    目标
                </div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        <div>
        <div>foot</div>
    </div>
    <script type="text/javascript">
            let bodyDom = document.querySelector('#body');
            /**
            * node - 获取传入标签的所有父级标签
            *
            * @param  { HTMLElement } node 初始dom节dian
            * @return {type} 目标节点
            */
           function getNodeDom(node,targeContent,result = []){
                let nodeType  = node.nodeType;
                let goalNode = null;
                if(nodeType===1){  //元素
                    let childNodes = node.childNodes;
                    for(let i=0;i<childNodes.length;i++){
                        getNodeDom(childNodes[i],targeContent,result); //递归
                    }
                }else if(nodeType===3){//文本节点
                    if(node.textContent.trim()==targeContent){ //r如果是目标节点，找到父级节点
                        goalNode= node.parentNode;
                        result.push(goalNode)
                    }
                }
                return result;   
           }

           let goalDom = getNodeDom(bodyDom,"目标");
           console.log(goalDom);

    </script>  
</body>
</html>