Получить элементы с одним классом, но не с другим без повторения

В следующем простом HTML я хотел бы получить все элементы с class1, но не с class2.

<li class="class1 class2"></li>
<li class="class1 class3"></li>
<li class="class1 class4"></li>

Используя getElementsByClassName('class1'), мы могли бы получить все элементы, а затем, возможно, удалить элементы, проверив, есть ли определенный класс существует.

Есть ли лучший способ сделать это без повторения?

Я нашел этот интересный пост о получении элементов с несколькими классами, так что осмелюсь спросить: есть что-то вроде этого: document.getElementsByClassName("class1 !class2")?

P.S.: Я не хочу использовать jQuery.


person mavrosxristoforos    schedule 21.10.2013    source источник


Ответы (2)


Если вы не против использовать все более совместимость .querySelectorAll() это возможно только с помощью:

  var getClassOne = document.querySelectorAll( '.class1:not(.class2)' );

Скрипт: http://jsfiddle.net/5tSGv/52/

Хотя без этого вам пришлось бы каким-то образом повторять className

person MackieeE    schedule 21.10.2013
comment
Спасибо, MackieeE, но вопрос в том, есть ли лучший способ сделать это?, кроме того, что вы опубликовали (что я описал в своем вопросе) - person mavrosxristoforos; 21.10.2013
comment
Я понимаю! Извиняюсь за слишком быстрое беглое рассмотрение вопроса - добавлена ​​скрипка с querySelectorAll(). - person MackieeE; 21.10.2013
comment
Спасибо MackieE. Я совсем не против его использования. Однако я хотел бы увидеть больше предложений, но если они не появятся, я приму ваш ответ. - person mavrosxristoforos; 21.10.2013

querySelectorAll() возвращает статический (не живой) NodeList, представляющий список элементов документа, соответствующих указанной группе селекторов.

Поэтому, если на странице нет динамического генератора div, вы можете использовать querySelectorAll().

person Venu Madhav    schedule 23.08.2020
comment
Спасибо! Это полезный совет. - person mavrosxristoforos; 02.09.2020