如何获取页面上除 div 之外的所有元素

Question

所以我试图将一些 css 应用于页面上的每个元素，但我不希望 css 应用于 div。我目前正在使用 document.getElementsByTagName("*") 到 select 每个元素，但据我所知，无论如何都无法过滤掉某种元素类型。我想我找到了一些可以满足我要求的代码，但它使用的是 jQuery，我不想在这个项目中使用它。有人知道怎么做吗？

Answer 1

您可以使用下面的 select 或者 select body 的所有子元素，而不是 div

body *:not(div)

或

body :not(div)

const allExceptDiv = document.querySelectorAll("body *:not(div)");

allExceptDiv.forEach(el => el.classList.add("highlight"))

.highlight {
  background: yellowgreen;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<div>This is div</div>

<p> This is para </p>

Answer 2

您可以使用非选择器

 body :not(div) {
     color: red;
 }

<html><body>
<div>Hello</div>
<a>World</a>
</body></html>

记得包含 body，否则，body 也将被视为应具有 color: red 样式的元素。

参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/:not

如何获取页面上除 div 之外的所有元素

How to get all elements on a page except div's

javascript

browser

dom

google-chrome-extension

web