JS选择器详解

XOMDM • 2025-01-16 15:46 • 编程

一、JS选择器有哪些

JS选择器是用来选取HTML元素的方法，常用的JS选择器有以下几种：

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()

二、JS过滤选择器

JS选择器还可以根据一些属性或者属性值来过滤选取元素，例如：

  const links = document.querySelectorAll("a[href^='https://']");
  // 上面的选择器选取的是所有链接（<a>标签），并且链接地址（href属性）以"https://"开头的元素

三、JS选择器not

JS选择器还支持not过滤器，可以排除某些元素，例如：

  const notFirstLi = document.querySelectorAll("li:not(:first-child)");
  // 上面的选择器选取的是所有li元素，但是排除了第一个子元素

四、JS选择器正则匹配

JS选择器还支持正则表达式作为选择器，以匹配更灵活的选择器，例如：

  const submitButtons = document.querySelectorAll("button[type^='submit|reset']");
  // 上面的选择器选取的是所有button元素，且type属性以"submit"或者"reset"开头的元素

五、JS选择器过滤器

JS选择器还有很多过滤器来帮助我们选取更精确的元素，例如：

:checked – 选取所有选中的输入元素
:disabled – 选取所有禁用的输入元素
:empty – 选取所有没有子元素的元素
:nth-child(n) – 选取所有在其父元素中的第n个子元素

六、JS选择器框架

JS选择器也可以在各种JS框架中使用，例如jQuery和React等

  // jQuery选择器
  const paragraph = $("p");

  // React选择器
  const element = <div className="container"></div>;
  const container = element.props.className === "container";

七、JS选择器优先级和权重

JS选择器也支持优先级和权重的概念，例如：

  // 上面的选择器先选取ID为example的元素，再过滤选取class为active的元素
  const exampleActive = document.querySelectorAll("#example.active");

  // 上面的选择器选取所有class为active的元素，并排除掉所有class为inactive的元素
  const activeNotInactive = document.querySelectorAll(".active:not(.inactive)");

八、JS选择器使用

JS选择器的使用非常灵活，可以根据我们的需要来选择合适的选择器进行选取元素，示例代码如下：

  <div id="example">
    <h2 class="section-title">标题</h2>
    <p class="section-description">描述</p>
    <button class="btn btn-primary">按钮</button>
  </div>

  const title = document.querySelector(".section-title");
  const description = document.querySelector(".section-description");
  const button = document.querySelector("button.btn-primary");

总之，JS选择器是一个非常重要的概念，对于Web开发来说，学好JS选择器能够使我们的元素选取更加灵活和高效。

原创文章，作者：XOMDM，如若转载，请注明出处：https://www.506064.com/n/330447.html