Question

使用这些格式'.selector'和'[class="selector"]'在DOM中选择有什么区别？

我希望使用两者中的任何一个得到相同的结果，但是在使用第二个变体时找不到该元素。为什么呢？

> 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

.selector匹配任何任何类selector的元素。即它将匹配class="selector foo"。

[class="selector"]匹配其"selector"属性中具有完全值class的任何元素。即不匹配class="selector foo"。

Answer 2

不同之处在于.something选择了所有something类的元素 - 即使他们有其他类。虽然[class='something']仅选择仅包含一个类'something'的元素。

在下面的代码段中，您可以看到.something将红色边框应用于两个框，而[class='something']选择器仅将背景颜色应用于第一个框。

＆＃13;

div {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.something {
  border: 2px solid red;
}

[class='something'] {
  background-color: blue;
}

＆＃13;

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

＆＃13;

Answer 3

使用属性选择器时，您尝试将完全匹配您传递的字符串。属性需要为cropped-profile-image__picture，仅此而已。

例如，以下<div>将匹配您的第一个查询选择器：

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

但是这个不会：

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

因为class属性不完全反映了您所查询的内容。

当您使用句点（querySelectorAll('.cropped-profile-image__picture')）查询某个类时，您使用的是一个DOM API，它将返回具有该类的元素，无论它们是否有更多类。

Answer 4

选择器仅选择完全匹配，但元素也具有类

cropped-profile-image__picture--type-cover

＆＃34; [class =＆＃39; something＆＃39;]＆＃34;之间的区别vs＆＃39; .something＆＃39;

4 个答案: