獲取 Parent 不是類的元素

Question

我想在 javascript 中返回一個在其父元素中沒有類的元素。

例如，我想在以下代碼片段中獲取子類元素，它沒有“父”作為父元素的類：

<div>
   <div class= "parent">
      <div class="child">
         Not to be selected 
      </div>
   </div>
   <div>
     <div class="child">
        To be selected
     </div>
   </div>
</div>

我試圖通過量角器中的 xpath 返回它

Answer 1

您可以使用:not選擇器。

 console.log(document.querySelectorAll(':not(.parent) > .child'));

 <div> <div class= "parent"> <div class="child"> Not to be selected </div> </div> <div> <div class="child"> To be selected </div> </div> </div>

Answer 2

有幾種方法可以做到這一點。 要么你檢查課程是否在那里。

var elementList = [];
document.querySelectorAll("div.child").forEach(function(e) {
  var parent = e.parentElement;
  if(parent.classList == null || !parent.classList.contains("parent")) {

    elementList.push(e);
  }
})
console.log(elementList);

如果父類是特定的，您可以使用 css :not 屬性

var elementList = document.querySelectorAll("div:not(.parent) > div.child");
console.log(elementList);