如果 HTML 标签包含某个属性，如何自动检测它？

【问题标题】：How to automatically detect an HTML tag if it contains a certain attribute?如果 HTML 标签包含某个属性，如何自动检测它？
【发布时间】：2021-09-24 16:55:53
【问题描述】：

如果HTML标签包含data-wow-delay这样的特定属性，如何自动检测它？这是来自 wow.js。

我要做的是，如果一个HTML标签包含上述属性，它会自动在标签中添加wow bounce类。

示例

HTML

<h1 data-wow-delay="0.2s">
    sample
</h1>

JS（这是我迷路的地方，不知道如何开始）

检查结果应该是这样的

<h1
    class="wow bounce"
    data-wow-delay="0.2s"
>
    sample
</h1>

注意：有很多不同的 HTML 标签使用这个属性。

【问题讨论】：

标签： javascript html next.js wow.js

【解决方案1】：

使用Element.hasAttribute()检查元素是否包含指定的属性：

const elem = document.querySelector('h1');

if(elem.hasAttribute('data-wow-delay')){
  elem.classList.add('wow', 'bounce')
}

.wow.bounce{
  background-color:grey;
}

<h1 data-wow-delay="0.2s">
  sample
</h1>

或者，您可以使用querySelectorAll 和CSS attribute selector 选择具有该属性的所有元素：

document.querySelectorAll('[data-wow-delay]').forEach(e =&gt; e.classList.add('wow','bounce'))

.wow.bounce{
  background-color:grey;
}

<h1 data-wow-delay="0.2s">
  sample
</h1>

<p data-wow-delay="0.1s">sample</p>

【讨论】：