Как сгенерировать уникальный селектор CSS для динамического дерева DOM? [закрыто] ⇐ Html

[Anonymous]

Я работаю над веб-системой, похожей на https://visitortracking.com/, где разные предприятия могут присоединиться к арендаторам. Как только они присоединятся, они могут создавать кампании для своих веб -сайтов. После этого они могут создавать кампании. Настройка кампании, я хочу, чтобы они указывали элементы, на которых будет подсчитано преобразование. Нужен способ генерировать точный и уникальный селектор CSS, когда элемент нажимается. Я хотел бы знать, сделал ли кто -нибудь подобную работу раньше или есть лучший альтернативный подход. function generateQuerySelector(el) {
if (!el || el.tagName.toLowerCase() === 'html') return 'HTML';

const path = [];
while (el && el.nodeType === Node.ELEMENT_NODE) {
let selector = el.tagName.toLowerCase();

// Add ID if available
if (el.id) {
selector += '#' + el.id;
path.unshift(selector);
break; // IDs are unique, so we can stop here
}

// Add class names if available
if (el.className && typeof el.className === 'string') {
const classes = el.className.split(/\s+/).filter(Boolean);
if (classes.length > 0) {
selector += '.' + classes.join('.');
}
}

const parent = el.parentNode;
if (parent) {
const siblings = Array.from(parent.children).filter(
child => child.tagName.toLowerCase() === el.tagName.toLowerCase()
);
if (siblings.length > 1) {
const index = siblings.indexOf(el) + 1;
selector += `:nth-child(${index})`;
}
}
path.unshift(selector);
el = el.parentNode;
}

return path.join(' > ');
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... c-dom-tree