我在一个网站上，我点击任何元素并对其进行操作
document.addEventListener('click', function(e){
e.target.innerHTML = `<span style="background: red">${e.target.innerText}</span>`
})
如何存储对单击元素的引用？
我想存储对数据库的引用，以便在重新加载页面时，将完全相同的元素包装在span标记中。
尚未经过全面测试，但是可以替代构建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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句