如何存儲參考 DOM 元素以備后用

Question

我在一個網站上，我點擊任何元素並操縱它

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

如何存儲對我單擊的元素的引用？

我想存儲對數據庫的引用，以便在重新加載頁面時，完全相同的元素包含在 span 標記中。

Answer 1

未經過徹底測試，但可以替代構建 DOM 中任何給定節點的 querySelector 字符串值中的代碼

注意：該代碼假定 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;
}