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

[Anonymous]

Я работаю над системой управления партнерами (PRM), где владельцы веб -сайтов могут создавать кампании и отслеживать конверсии. Как часть этого, пользователи могут визуально выбирать элементы на своем веб -сайте (например, кнопку «Зарегистрироваться»), чтобы определить, что считается событием преобразования. Это покрывает все края. Я хотел бы посмотреть, сделал ли кто -нибудь подобную работу раньше или есть альтернативный и лучший подход. < /P>
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