Разница между "[class ='thing ']" и ".something"

Question

В чем разница между выбором в DOM с этими форматами '.selector' и '[class="selector"]'?

Я ожидал бы того же результата, используя оба из них, но элемент не найден при использовании второго варианта.Почему?

> document.querySelectorAll('[class="cropped-profile-image__picture"]')
NodeList []length: 0__proto__: NodeList
> document.querySelectorAll('.cropped-profile-image__picture')
NodeList(2) [div.cropped-profile-image__picture.cropped-profile-image__picture--type-cover, div.cropped-profile-image__picture.cropped-profile-image__picture--type-profile]

Answer 1

Когда вы используете селектор атрибута, вы пытаетесь сопоставить точно строку, которую вы передаете.Атрибут class должен быть cropped-profile-image__picture, ни больше, ни меньше.

Например, следующий <div> будет соответствовать вашему первому селектору запросов:

<div class="cropped-profile-image__picture"></div>

Но этотне будет:

<div class="cropped-profile-image__picture another-class"></div>

Поскольку атрибут класса не точно отражает то, что вы запросили.

Когда вы запрашиваете класс, используя точку (querySelectorAll('.cropped-profile-image__picture')) вы используете DOM API, который будет возвращать элементы, имеющие этот класс, независимо от того, есть у них больше классов или нет.

Answer 2

Разница в том, что .something выбирает все элементы, которые имеют класс something - , даже если у них есть другие классы .В то время как [class='something'] выбирает только те элементы, которые имеют только один класс 'something'.

В приведенном ниже фрагменте кода видно, что .something применяет красную рамку к обоим полям, в то время как селектор [class='something'] применяетсяцвет фона только для первого поля.

div {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.something {
  border: 2px solid red;
}

[class='something'] {
  background-color: blue;
}

<div class="something"></div>

<div class="something else"></div>

Answer 3

Селектор выбирает только точные совпадения, но элементы также имеют класс

cropped-profile-image__picture--type-cover

Answer 4

.selector соответствует любому элементу, который имеет любой класс selector.Т.е. он будет соответствовать class="selector foo".

[class="selector"] соответствует любому элементу, который имеет точно значение "selector" в своем атрибуте class.Т.е. он будет не совпадать class="selector foo".