javascript - 使用 querySelectorAll 排除标签标签

Question

下面是标签。

<label style="vertical-align: middle; cursor: pointer;">Terrain</label>

它嵌套在以下结构中(见末尾的标签):

<div class="event-section">
   <div class="googlemaps">
     <div id="googleMap6512">
        <div>
           <div class="gm-style">
              <div class="gmnoprint">
                <div class="gm-style-mtc">
                   <div>
                      <div>
                        <label>...

问题: 我想在我的 Javascript 中排除这个标签以及另一个 div.widget_small 中的标签，我在这里试过这个:

var arrInp = document.querySelectorAll("label:not(.googlemaps):not(.widget_small)");

这没有用。我想我选错了选择器或……？

Answer 1

类不是继承的。

label 不是 googlemaps 或 widget_small 的成员，所以 label:not(.googlemaps):not(. widget_small) 确实匹配它。

您需要选择一个标签，其中没有一个祖先是这些类的成员。

无法在选择器中表达这一点，因此您需要选择所有 label 元素，然后循环遍历它们，过滤掉那些具有这些类(您可以确定通过递归遍历 .parentNode 直到找到匹配 .googlemaps、.widget_small(失败)或 body(成功)的节点。

或者，您可以非常精确地知道该元素有哪些祖先:

:not(.googlemaps) > * > * > * > * > * > * > * > label

……但这可能比维护起来更麻烦。