如果 class 不存在，则执行此操作，否则忽略

Question

您好，我在 Javascript 中尝试做的是查找 class '.promo' 是否存在于 '.productDetails' div 中，如果存在，则不需要采取任何行动，但如果它不存在，那么我希望它在 span 标签中打印副本。我知道这可以在 jQuery 中完成，但希望在普通 Javascript 中完成。

var elem = document.querySelector('.product-details');
if(!elem.classlist.contains('.promo')){
   document.querySelector('.title').innerHTML += "<span class="promo">Add Promo Banner</span>";
 }

.product-details {border: 1px black solid; margin: 10px 0}

<div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

Answer 1

首先，JS中的大小写问题（classlist != classList），应该是驼峰式大小写classList。此外，htmlString ("<span class="promo">Add Promo Banner</span>") 的格式不正确。

您可以通过使用 querySelectorAll():

获取元素来检查长度

var elem = document.querySelectorAll('.product-details');
elem.forEach(function(el){
  if(!el.querySelectorAll('.promo').length){
    el.querySelector('.title').innerHTML += "<span class=promo>Add Promo Banner</span>";
  }
});

.product-details {border: 1px black solid; margin: 10px 0}

<div class="product-details">
  <div class="title">Title</div>
  <div class="promo">Promo 20% off</div>
</div>

<div class="product-details">
  <div class="title">Title</div>
</div>

Answer 2

就 JS 而言，您的代码中的问题只是语法问题。成员叫

<HTML element>.classList

您只是漏掉了大写的 L。

elem.classList 不会 return ".classNameA .classNameB"，而是 class 属性的实际字符串值，如下所示："classNameA classNameB"

但是，我仍然认为如果您进行这些更改，您的代码将无法正常运行，因为您正在搜索一个元素以查找它不继承自的 class。从 "promo" 继承的元素是您引用的元素的子元素。

您在特定代码中查找的元素可在 elem.children 数组中找到，该数组是可迭代的。

您是否正在尝试搜索页面上所有元素的所有子元素以查找包含 "promo" 的 .classList 的继承者？如果是这样，您应该检查树遍历算法！更明显的实现是您将从某个根开始，然后通过深度优先或广度优先搜索向下导航。 DOM实际上只是一棵巨大的元素树。

如果 class 不存在，则执行此操作，否则忽略

If class doesn't exist do this else ignore

javascript

if-statement

class

contains