Как при помощи JS создать CSS Selector для элемента имея на него ссылку?

Question

[Alex]

Как при помощи JS создать CSS Selector для элемента имея на него ссылку? Т.е. есть ссылка на элемент, и требуется сформировать на него CSS Selector, который при помещении его в document.querySelector вызовет его.
Думал опираться на id и class, но бывают элементы без атрибутов вообще, либо повторяющиеся классы.

Answer 1

[Дмитрий Беляев]

function calculateSelector(element) {
  let selector = '';
  for(let current = element; current?.nodeType === 1; current = current.parentElement) {
    if(current.id) {
      selector = `#${current.id}>${selector}`;
      break;
    }
    const tag = current.tagName.toLowerCase();
    const classes = Array.from(current.classList, cls => `.${cls}`).join('');
    selector = `${tag}${classes}>${selector}`;
  }
  return selector.slice(0, -1);
}

Comments

[Alex]

спасибо большое то что нужно! :)

Answer 2

[Алексей Ярков]

data-* атрибуты

Comments

[Alex]

не совсем понял. Как дата атрибуты помогут построить CSS селектор?

[Алексей Ярков]

Alex, это такой же селектор

[data-test="foo"] {
  color: red;
}

На досуге почитайте: https://code.tutsplus.com/ru/tutorials/the-30-css-...

[Alex]

Алексей Ярков, вопрос был как составить CSS Селектор для элемента, причем тут Data атрибут? Составить CSS Селектор это значит сформировать строку пути до этого элемента по синтаксису например queryselector :)

[Алексей Ярков]

Alex, и зачем эти сложности? Ссылка на узел есть? Есть. Пишем туда уникальный атрибут, типа

domElement.setAttribute('data-unique-id', '1321321321321321')

и выбираем его с помощью document.querySelector:

document.querySelector('[data-unique-id="1321321321321321"]')

.

[Alex]

Алексей Ярков, потому что трогать элемент нельзя, отсюда требуется CSS путь до элемента. Так бы конечно проще назначить и любой уникальный класс и даже data атрибут не нужен.

[Алексей Ярков]

Alex,

потому что трогать элемент нельзя

Всего за 5 комментариев мы выяснили важную подробность, которую надо было указать в вопросе. Бинго!

[Alex]

Алексей Ярков, зачем вообще нужно было это выяснять если, вопрос был поставлен четко про составление CSS пути до элемента? За разговором можно много еще подробностей узнать о том, где и при каких условиях я это использую, только это все лишняя трата времени. И чтоб тут поэму не писать я задал конкретный вопрос :)
Но все равно спасибо, и вам и Дмитрию Беляеву!

[Алексей Ярков]

Alex,

За разговором можно много еще подробностей узнать о том, где и при каких условиях я это использую, только это все лишняя трата времени

Если бы оно было так )) Очень много людей так задают вопросы, что из них приходится клещами каждое слово вытягивать. Они тоже считают, что это всё неважные подробности, а когда пару вопросов задашь, то выяснится, что человек вообще не тем путём пошёл в решении своей задачи, о которой он умолчал, ибо "не важно же". Так что не всё так однозначно ))