如果类不存在，则执行此操作，否则忽略
Posted
技术标签:
【中文标题】如果类不存在，则执行此操作，否则忽略【英文标题】：If class doesn't exist do this else ignore 【发布时间】：2021-06-28 11:02:08 【问题描述】：嗨，我在 javascript 中尝试做的是查找 '.productDetails' div 中是否存在类 '.promo'，如果存在，则不需要采取任何措施，但如果它不存在然后我希望它在跨度标签中打印副本。我知道这可以在 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>【问题讨论】：
作为documentation for.classlist shows，您必须将实际的类名而不是类选择器传递给.contains()
首先是classList。其次，您的字符串有未转义的引号。第三，不要永远使用.innerHTML +=——改用insertAdjacentHTML。第四，您正在测试.product-details 元素本身是否具有.promo 类；要测试元素是否包含 .promo 子元素，请使用 .querySelector('.promo')。
【参考方案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>【讨论】：
谢谢你，但是因为那里不存在 .promo 类，所以应该在第二个标题下添加带有“添加促销横幅”副本的 span 标签。 @leek1234，在这种情况下，您必须遍历所有项目并检查每个项目的条件。我已经更新了答案。请检查:) 对不起最后一个问题，如果我想查找 .promo 类是否存在或 .text 类我该怎么做？这个想法是一样的，不要用副本打印跨度标签。 @leek1234，在这种情况下你可以添加另一个条件if(!el.querySelectorAll('.promo').length || !el.querySelectorAll('.text').length)
感谢@Mamun 我已经尝试过了，但它似乎不起作用。跨度标记现在都打印在两者上。【参考方案2】：
就 JS 而言，您的代码中的问题只是语法。该成员被称为
<HTML element>.classList
您只是缺少大写的 L。
elem.classList 不会返回".classNameA .classNameB"，而是返回类属性的实际字符串值，像这样："classNameA classNameB"
但是，如果您进行这些更改，我仍然不相信您的代码会正常运行，因为您正在为一个元素搜索一个它不继承自的类。从"promo" 继承的元素是您引用的元素的子元素。
您在特定代码中查找的元素位于可迭代的 elem.children 数组中。
您是否尝试搜索页面上所有元素的所有子元素以查找包含"promo" 的.classList 的继承人？如果是这样，您应该检查树遍历算法！更明显的实现是，您将从某个根目录开始并通过深度优先或广度优先搜索向下导航。 DOM 实际上只是一棵巨大的元素树。
【讨论】：
以上是关于如果类不存在，则执行此操作，否则忽略的主要内容，如果未能解决你的问题，请参考以下文章
Selenium WebDriver Java - 如何执行“如果存在，则单击，否则跳过”？