javascript - 如何清空所有 HTML 元素中的所有类属性

Question

我想清空所有 html 源代码类属性。例如，我有多个元素值，例如 div 元素、标题和段落。每个 HTML 元素都包含不同的类属性，就像下面的代码:

  <div class="card-body">
    <h5 class="card-title main-text-color ">My Mobile Phone is best
              </h5>
    <p class="">Lorem ipsum dolor sit amet, 
    </p>
    <p class="py-2">
        <a class=" main-color btn  text-light " href="#" class=" ">MORE DETAIL
                </a>
    </p>
</div>

现在我想让它像下面的代码一样:

<div class="">
    <h5 class=" ">My Mobile Phone is best
              </h5>
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec imperdiet ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
    </p>
    <p class="">
        <a class="  " href="#" class=" ">MORE DETAIL
                </a>
    </p>
</div>

如何在浏览器中使用 Javascript 执行此操作？

Answer 1

使用查询字符串[class]并使用querySelectorAll选择所有具有class属性的元素，然后设置它们的 className 为空字符串:

document.querySelectorAll('[class]').forEach((elm) => {
  elm.className = '';
});
console.log(document.body.innerHTML);

<div class="card-body">
  <h5 class="card-title main-text-color ">My Mobile Phone is best
  </h5>
  <p class="">Lorem ipsum dolor sit amet,
  </p>
  <p class="py-2">
    <a class=" main-color btn  text-light " href="#" class=" ">MORE DETAIL
                </a>
  </p>
</div>

如果您想完全删除类属性，而不是将它们全部设置为空字符串，请改为使用

elm.removeAttribute('class');

document.querySelectorAll('[class]').forEach((elm) => {
  elm.removeAttribute('class');
});
console.log(document.body.innerHTML);

<div class="card-body">
  <h5 class="card-title main-text-color ">My Mobile Phone is best
  </h5>
  <p class="">Lorem ipsum dolor sit amet,
  </p>
  <p class="py-2">
    <a class=" main-color btn  text-light " href="#" class=" ">MORE DETAIL
                </a>
  </p>
</div>

在不支持 NodeList.prototype.forEach 的旧浏览器上，您可以使用 for..of (如果支持 ES6)或普通的 for 手动迭代索引的循环。