Javascript 如何存储引用DOM元素以供以后使用

我在一个网站上，我点击任何元素并操纵它

document.addEventListener('click', function(e){
  e.target.innerHTML = `<span style="background: red">${e.target.innerText}</span>`
})

document.addEventListener（'click'，函数（e）{
e、 target.innerHTML=`${e.target.innerText}`
})

如何存储对我单击的元素的引用

---

我希望存储对数据库的引用，以便在重新加载页面时，将完全相同的元素包装在一个span标记中。

未经过彻底测试，但这是中代码的替代方法

注意：该代码假定编写良好的HTML，即唯一ID，不幸的是，web上充满了具有非唯一ID的垃圾页面，因此该代码将失败

结果很可能是一个比上述代码更长的选择器，但它似乎可以工作-我还没有打破它：p

function getCSSPath(el) {
    const fullPath = [];
    const fn = el => {
        let tagName = el.tagName.toLowerCase();
        let elPath = '';
        if (el.id) {
            elPath += '#' + el.id;
        }
        if (el.classList.length) {
            elPath += '.' + [...el.classList].join('.');
        }
        if (el.parentElement) {
            if (el.previousElementSibling || el.nextElementSibling) {
                let nthChild = 1;
                for (let e = el.previousElementSibling; e; e = e.previousElementSibling, nthChild++);
                tagName += `:nth-child(${nthChild})`;
            }
            fn(el.parentElement);
        }
        fullPath.push(tagName + elPath);
    };
    fn(el);
    return fullPath.join('>');
}

---

但我认为这是上面的更好版本：

function getCSSPath(el) {
    let elPath = el.tagName.toLowerCase();
    if (el.parentElement && (el.previousElementSibling || el.nextElementSibling)) {
        let nthChild = 1;
        for (let e = el.previousElementSibling; e; e = e.previousElementSibling, nthChild++);
        elPath += `:nth-child(${nthChild})`;
    }
    if (el.id) {
        elPath += '#' + el.id;
    }
    if (el.classList.length) {
        elPath += '.' + [...el.classList].join('.');
    }
    return (el.parentElement ? getCSSPath(el.parentElement) + '>' : '') + elPath;
}

---

您是希望存储实际的元素本身（JS可以很容易地做到这一点，元素可以存储为变量）还是将其序列化为字符串？我觉得，如果您将一个元素作为字符串存储在动态站点的DB中，那么有更优雅/高效的方法来存储数据；一些更原子的东西，你可以用服务器端语言或其他东西来重建元素。@matthew-e-brown我正在为自己创建一个突出显示的chrome扩展。假设我在一篇维基文章上。我高亮显示的文本变为红色，并存储在aa DB中（我有）。然后，当我刷新同一页面时，我需要看到前面的突出显示。如果不向DOM节点添加唯一标识符，则无法在页面重新加载时保持稳定。任何其他这样做的方法都是非常脆弱的。跨页面重新加载时，对DOM的JavaScript引用不稳定。也许有一种更好的方法可以做你想做的事情，而不必使用这种解决方案。您试图解决什么问题？您可以使用元素选择器来解决页面重新加载问题，但不能保证您将获得相同的元素或任何元素。您无法控制第三方网页。您不能，但您可以尝试保存选择器，但正如我所说，它可能无法获得相同的元素。查看如何获取选择器（例如：从您的

e.target

）现在我正处于测试阶段，我正在深入研究这个函数的问题。例如，在Reddit中，输出不会产生任何结果。解决方案是该函数不必一直返回到

html

。我正在尝试修改它，但是您如何做才能使它只深入几层，比如说

.gran>.parent>.element

-谢谢。。。我对结果进行切片以获得所需的

getCSSPath（parentEl）.split（“>”）.slice（1）.slice（-2）.join（“>”）

并且它可以工作，我只是出于学习的目的，问你如何重构函数