是否获取元素的所有父元素的nodeValues

Question

我有一个HTML文档，它的结构是这样的：

<div id="oa2">
    Content
    <div>
        Content
        <div>
        . . .
        </div>
    </div>
</div>

元素链可以任意深入。当屏幕上有点击时，我会拿起它，并尝试使用以下JavaScript获取点击元素的父母监护链：

let a=document.getElementById("oa2");
let c=[];
let d=[];
let i=[0,0,0,0];
document.onclick=function(e){
    let b=e.target;
    while(b){
        let f=b.childNodes;
        if(b==(a||document.body)){break;};
        if(!d.includes(b.id)){d[i[0]]=b.id;i[0]++;};
        while(i[3]<f.length){
            if(f[i[3]].nodeType==Node.TEXT_NODE)
            {c[i[1]]=[];c[i[1]][i[3]]=f[i[3]].nodeValue};
            i[3]++;
        };
        b=b.parentElement;
    };
    i[1]++;
    i[3]=0;
};

要清楚的是，我想要的是一个数组(c(，它包含包含"；路径"；子元素的内容和每个连续父元素的内容的内容。每次单击文档时，我都希望c中有一个新的子数组，其中包含"；路径"；点击的元素，没有重复项(我用d处理了这个问题(。。

Answer 1

您可以有一个while循环，在每次迭代中检查目标的父元素，并获得路径的数组。

document.onclick = e => {
    let element = e.target
    const path = []
    while(element) {
        path.push(element)
        element = element.parentElement
    }
    console.log(path)
}

你也可以在Chrome和Firefox上查看事件路径属性(Safari也有，但它是不同的

https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath