一、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选择器能够使我们的元素选取更加灵活和高效。