JS: создание строки селектора CSS из элемента HTML
В JavaScript, если я выбрал элемент HTML, например:
<div id = "some-id" class = "class-1 class-2">...</div>
Есть ли простой способ создать соответствующий селектор CSS/QuerySelector?
"div#some-id.class-1.class-2"
Или это единственный способ построить эту строку вручную, используя tagName, id и classList?
@ericmp Проще, чем tagName, id и classList?
Я немного запутался в том, чего ты хочешь достичь. если вы хотите выбрать элемент по идентификатору, вы можете использовать document.querySelector('#some-id'). не уверен, в чем твой вопрос
@ericmp спасибо, кажется, это то, о чем я думал. Если вы напишете это как ответ, я отмечу его как ответ (если не появятся лучшие решения).
@Энди, я не пытаюсь выбрать элемент. Я хочу преобразовать элемент в строковое представление в синтаксисе QuerySelector.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
tagName, id и classList довольно просты в использовании, если вам нужен список селекторов.
Если у вас есть ID, остальные вам не нужны:
const divSelectors = tag => [...document.querySelectorAll(tag)]
.map(tag => tag.id ? `#${tag.id}` : `${tag.tagName.toLowerCase()}${tag.classList.length ? `.${[...tag.classList].join('.')}` : ''}`)
console.info(divSelectors("div"))<div>...</div>
<div id = "id1" class = "class-1 class-2">...</div>
<div id = "id2" class = "class-3 class-4">...</div>
<div id = "id3" class = "class-5 class-6">...</div>
<div class = "class-7 class-8">...</div>
<div id = "id4">...</div>Но если вы настаиваете:
const divSelectors = tag => [...document.querySelectorAll(tag)]
.map(tag => `${tag.tagName.toLowerCase()}${tag.id?`#${tag.id}`:''}${tag.classList.length ? `.${[...tag.classList].join('.')}` : ''}`)
console.info(divSelectors("div"))<div>...</div>
<div id = "id1" class = "class-1 class-2">...</div>
<div id = "id2" class = "class-3 class-4">...</div>
<div id = "id3" class = "class-5 class-6">...</div>
<div class = "class-7 class-8">...</div>
<div id = "id4">...</div>Удивительно, но мы можем использовать querySelector для нескольких элементов div с одним и тем же идентификатором.
console.info(document.querySelector("#aDiv").textContent)
console.info(document.querySelector("#aDiv.three.four").textContent)
console.info([...document.querySelectorAll("#aDiv")].map(div => div.textContent))<div id = "aDiv" class = "one two">First</div>
<div id = "aDiv" class = "three four">Second</div>Вау, это какой-то сжатый код. 🤩
Есть баг, когда нет классов: <div> -> "div0". Кроме того, если есть идентификатор, то технически вы также можете опустить классы. Но обратите внимание, что в реальном мире есть документы с повторяющимися идентификаторами.
Я исправил небольшую ошибку, из-за которой отсутствовала ведущая точка для классов.
Все снова работает.
Поскольку в HTML не может быть «фатальных» ошибок, правило об уникальных идентификаторах больше похоже на рекомендацию. Таким образом, браузеры должны обрабатывать повторяющиеся идентификаторы, так что на самом деле идентификаторы — это просто особый вид класса.
Однако ваш JS может не работать с повторяющимися идентификаторами :)
Это возможное решение вашей проблемы
function createCssSelector(el){
return `${el.nodeName}${el.id ? '#'+el.id : ''}${el.getAttribute('class') ? '.'+el.getAttribute('class').split(' ').join('.') : ''}`;
}
console.info(createCssSelector(document.querySelector('#some-id')));
console.info(createCssSelector(document.querySelector('#some-id-2')));
console.info(createCssSelector(document.querySelector('span')));
console.info(createCssSelector(document.querySelector('#some-id-3')));<div id = "some-id" class = "class-1 class-2 class-4">...</div>
<p id = "some-id-2" class = "black blue white">...</p>
<span class = "black blue white">...</span>
<p id = "some-id-3" class = "">...</p>Это прерывается, если классов нет, и всегда будет выводить «#», даже если нет идентификатора. (Я вижу, что мой вопрос не был ясен по этому поводу, отредактировал вопрос.)
Имея этот HTML:
<div id = "some-id" class = "class-1 class-2">...</div>
Вы можете выбрать div, используя различные методы/способы:
document.querySelector("#some-id")
document.querySelector(".class-1.class-2")
document.getElementById("some-id")
document.querySelector("#some-id.class-1.class-2")
...
В зависимости от того, что вы делаете, вы хотите использовать тот или иной. Если нет контекста, я бы придерживался первого.
* (Дополнительный совет) Если вы используете веб-браузер, вы можете:
- Откройте DevTools.
- Нажмите на значок курсора — «Выберите элемент на странице для его проверки».
- Щелкните элемент на странице.
- Перейдите в консоль devtools.
- Пишите
$0. Если вы не вернетесь, он покажет вам полный селектор.
- Если вы вернетесь, он зарегистрирует выбранный вами элемент.
Документация:
Вы правы, в основном мне нужна функция, которая возвращает строку, которую вы видите в DevTools. ("div#some-id.класс-1.класс-2")