Получить Элемент, который Родитель не класс

Question

Я хотел бы вернуть элемент в javascript, который не имеет класса в своем родительском элементе.

Например, я хотел бы получить дочерний элемент класса в следующем фрагменте кода, который не имеет 'parent' в качестве класса для родительского элемента:

<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

Есть несколько способов сделать это.Либо вы проверяете, существует ли класс.

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);

Answer 2

Вы можете использовать селектор :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>