如何清空所有 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循环。

Answer 2

你可以简单地试试这个：

获取所有 html 元素，遍历它们并将 class 属性设置为空字符串

const htmlElements = document.body.getElementsByTagName("*");

for (let i = 0; i < htmlElements.length; i++) {
  htmlElements[i].className=''
}