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

Question

如果 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 标签使用此属性。

Answer 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 到 select 所有具有属性的元素：

document.querySelectorAll('[data-wow-delay]').forEach(e => 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>