您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JavaScript querySelector 选择元素

时间:06-10来源:作者:点击数:

在本教程中,您将学习如何使用 JavaScript  querySelector 以及 querySelectorAll 如何基于 CSS 选择器查找元素。

JavaScript querySelector 和 querySelectorAll 方法简介

querySelector 是 Element 接口的方法。querySelector 方法允许您选择与一个或多个 CSS 选择器匹配的第一个元素。

下面是 querySelector 方法的语法:

let element = parentNode.querySelector(selector);

在此语法中,selector 是一个 CSS 选择器或一组 CSS 选择器,用于匹配 parentNode 的后代元素。

如果 selector 的 CSS 语法无效,该方法将抛出  SyntaxError 语法错误异常 。如果没有元素与 CSS 选择器匹配,则 querySelector 方法返回 null

querySelector 方法可用于 document 对象或任何Element 对象。

除了 querySelector 方法之外,您还可以使用 querySelectorAll 方法来选择与一个 CSS 选择器或一组 CSS 选择器匹配的所有元素:

let elementList = parentNode.querySelectorAll(selector);

querySelectorAll 方法返回与 CSS 选择器匹配的元素 NodeList。如果没有元素匹配,则返回空的 NodeList

请注意,NodeList 是一个类似数组的对象,而不是数组对象。但是,在现代 Web 浏览器,您可以使用 forEach 方法或 for...of 进行遍历。

要将 NodeList 转换为数组,可以使用 Array.from() 方法:

let nodeList = document.querySelectorAll(selector); 
let elements = Array.from(nodeList);

选择器

假设您有如下 HTML 文档:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>querySelector() Demo</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="img/logo.jpg" alt="Logo" id="logo">
        </div>
        <nav class="primary-nav">
            <ul>
                <li class="menu-item current"><a href="#home">Home</a></li>
                <li class="menu-item"><a href="#services">Services</a></li>
                <li class="menu-item"><a href="#about">About</a></li>
                <li class="menu-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Welcome to the JS Dev Agency</h1>

        <div class="container">
            <section class="section-a">
                <h2>UI/UX</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
                    laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
                    Adipisci, obcaecati repellat.</p>
                <button>Read More</button>
            </section>
            <section class="section-b">
                <h2>PWA Development</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
                    commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
                    provident labore nihil in earum.</p>
                <button>Read More</button>
            </section>
            <section class="section-c">
                <h2>Mobile App Dev</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
                    Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
                    laborum debitis eos?</p>
                <button>Read More</button>
            </section>
        </div>
    </main>
    <script src="js/main.js"></script>
</body>
</html>

通用选择器

通用选择器使用 * 匹配所有元素,以下示例使用 querySelector() 方法选择 HTML 文档中的第一个元素:

let element = document.querySelector('*');

在 querySelectorAll 方法使用通用选择器  *  将会选择文档中的所有元素:

let elements = document.querySelectorAll('*');

类型选择器

要按元素名称(标签名)名称选择元素,请使用类型选择器,例如 a 选择所有 <a> 元素:

下面的示例查找 HTML 文档中的第一个 h1 元素:

let firstHeading = document.querySelector('h1');

以下示例查找所有 h2 元素:

let heading2 = document.querySelectorAll('h2');

类名选择器

要查找具有指定 CSS 类名的元素,可以使用类选择器语法:

.className

以下示例查找类名是 menu-item 的第一个元素:

let note = document.querySelector('.menu-item');

以下示例查找类名是 menu 的所有元素:

let notes = document.querySelectorAll('.menu-item');

ID 选择器

要根据 id 的值选择元素,请使用 id 选择器语法:

#id

以下示例查找第一个具有 id 是 #logo 的元素:

let logo = document.querySelector('#logo');

由于 id 在文档中是唯一的,因此不需要使用 querySelectorAll 方法。

属性选择器

要选择具有指定属性的所有元素,请使用下面属性选择器语法之一:

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]

以下示例查找任意属性值是 [autoplay] 的第一个元素:

let autoplay = document.querySelector('[autoplay]');

以下示例查找任意属性值是 [autoplay] 的所有元素:

let autoplays = document.querySelectorAll('[autoplay]');

分组选择器

要将多个选择器分组。请使用以下语法:

selector, selector, ...

以下示例查找所有 <div> 和 <p> 元素:

let elements = document.querySelectorAll('div, p');

组合选择器

后代选择器

要查找节点的后代,可以使用空格分隔的后代组合器语法:

selector selector

例如 p a 将匹配元素 p 内的所有 a 元素:

let links = document.querySelector('p a');

子选择器

子组合器 > 被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素,这些元素是被第一个选择器匹配的元素的直接子元素:

selector > selector

以下示例选择位于 <ul> 元素内部的所有 li 元素:

let listItems = document.querySelectorAll('ul > li');

要选择位于 <ul> 且类名是 nav 内部的所有 li 元素:

let listItems = document.querySelectorAll('ul.nav > li');

后续兄弟选择器

后续兄弟选择器 ~ 将两个选择器分开,并匹配第二个选择器的所有元素,位置无须紧邻于第一个元素,只须有相同的父级元素。

selector ~ selector

例如,p ~ a 匹配 p 元素后面的所有 a 元素:

let links = document.querySelectorAll('p ~ a');

接续兄弟组合器

接续兄弟选择器 + 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。

selector + selector

例如,h1 + a 匹配 h1 紧邻的所有 a 元素:

let links = document.querySelectorAll('h1 + a');

下面的示例选择第一个 h1 紧跟在后面的 a 元素:

let links = document.querySelector('h1 + a'); 

伪类选择器

伪类

伪 :  基于其状态匹配元素:

element:state

例如,li:nth-child(2) 选择列表中的第二个 <li> 元素:

let listItem = document.querySelectorAll('li:nth-child(2)');

伪元素

:: 代表未包含在 HTML 文档的实体。例如, p::first-line 匹配所有 p 元素的第一行。

let links = document.querySelector('p::first-line');

结论

querySelector() 查找与一个 CSS 选择器或一组 CSS 选择器匹配的第一个元素。querySelectorAll() 查找与一个 CSS 选择器或一组 CSS 选择器匹配的所有元素。CSS 规则适用的定义 CSS 选择器。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门