В чем разница между todo.classList === 'completed а также todo.classList.contains('completed')

Я не уверен, неправильно ли я интерпретирую их использование или мой код написан плохо, но я не понимаю, почему последний выбирает элементы с завершенным классом, а первый выбирает все параметры в моем теге select.

1
Michael 7 Окт 2020 в 20:39

4 ответа

Лучший ответ

В чем разница между todo.classList === 'completed' и todo.classList.contains('completed')

Нет смысла сравнивать classList со строкой, потому что это структура данных, подобная массиву. Идите с el.classList.contains(str).

Если вы уверены, что ваш элемент имеет только один класс CSS, вы можете сделать el.className === 'completed', или, по крайней мере, гарантировано, что он будет первым классом, el.classList[0] === 'completed'. Но не стоит.

const todo = document.querySelector('div');

console.log(todo.className === 'completed'); // true
console.log(todo.classList.contains('completed')); // true
<div class="completed"></div>
2
connexo 7 Окт 2020 в 20:37

.classList возвращает DOMTokenList. DOMTokenList работает аналогично массиву, но не содержит всех .map(), .forEach() и т. Д. Крутых вещей.

todo.classList === 'completed' не будет работать, поскольку вы хотите иметь возможность сравнивать DOMTokenList с String.

todo.classList.value === 'completed' будет работать, только если единственный класс todo - completed. Это НЕ следует использовать.

todo.classList.contains('completed') будет работать, если хотя бы один из классов todo будет completed. Это лучший способ сделать это.

Вот несколько приемов, которые могут вам понадобиться для работы с DOMTokenList s:

[...todo.classList]; //convert to array
todo.classList[0]; //unofficial way to get the nth class name
todo.classList.item(0); //standard way to get the nth class name
1
DadiBit 7 Окт 2020 в 18:15

Вот все методы, которые вы можете использовать со списком классов. Contains вернет логическое значение, если у элемента есть класс, который вы передали с ним.

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://www.w3schools.com/jsref/prop_element_classlist.asp

1
Clipto 7 Окт 2020 в 17:55

Ваше использование неверно.

Contains может использоваться со списком классов. Вы не можете напрямую поставить условие на метод списка классов.

   event.target.classList.add('class3');
   event.target.classList.remove('class1');  
   event.target.classList.contains('class2'); // To check  class is present or not it returns boolean value.
   event.target.classList.toggle('class4'); 
0
Sunny 7 Окт 2020 в 18:03