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

Question

我在一个网站上，我点击任何元素并对其进行操作

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

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

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

Answer 1

没有经过彻底测试，但可以替代Build the querySelector string value of any given node in the DOM中的代码

注意：该代码假定编写良好的 HTML，即唯一 ID - 不幸的是，网络上充满了具有非唯一 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;
}