Получить идентификатор элемента, в котором класс содержит заданную строку

Question

В настоящее время я пытаюсь выяснить способ получения идентификатора элемента, в зависимости от того, содержит ли его класс что-то. Я не уверен, есть ли лучший способ сделать это, чем я в настоящее время, но, оглядевсь, ничего не подходит точно, что у меня есть. Код, который у меня есть, есть, где я ищу элемент div, класс которого содержит строку «один», но не ограничивается этим. В настоящее время существует только один элемент, содержащий эту строку, но предупреждение дает мне [Object NodeList] (я вполне может быть усложнять это):

$idToMove = document.querySelectorAll('div[class^="one"]'); 
     alert($idToMove); 

Answer 1

document.querySelectorAll() Возвращает список узлов (вроде как массив), если вы уверены, что будет только один, у вас есть пара вариантов.

1) Используйте .querySelector вместо:

// returns the first node that matches 
var elm = document.querySelector('div[class~="one"]'); 
console.log(elm.id); 

2) Доступ первый элемент в возвращаемом списке:

// returns all nodes that match 
var elms = document.querySelectorAll('div[class~="one"]'); 
console.log(elms[0].id); 

Убедитесь обнулить проверить возвращения .querySelector и проверки длины возвращения .querySelectorAll.

Также обратите внимание, что я использую ~=, а не ^=. Вы можете прочитать on the MDN о различии между всеми операторами равенства. Но за эти два:

[атр ~ = значение] Представляет элемент с именем атрибута ATTR, значение которого является разделенный пробелами список слов, один из которых точно «значение».

[attr^= value] Представляет элемент с именем атрибута attr и первое значение которого имеет префикс «значение».