Logo

菜单

发布于 2026-01-06 11 阅读
0

在 Javascript 中使用 CSS 选择器

在 Javascript 中使用 CSS 选择器

在 CSS 中，选择器是用于选择要设置样式的元素的模式，但正如您从上面的标题中看到的，选择器在 JavaScript 中也很有用，下面是一些如何使用它们的示例。

基础知识

在 JavaScript 中使用选择器

  • 使用该.querySelector方法
const div = document.querySelector("div") // => First occurence of a div element in the document

const p = div.querySelector("p") // => First occurence of a p element in the div
Enter fullscreen mode Exit fullscreen mode
  • 要获取所有匹配的元素，请使用该document.querySelectorAll方法
document.querySelectorAll("div") // NodeList of all div elements
Enter fullscreen mode Exit fullscreen mode

按ID

要通过元素 ID 获取元素，请#在元素 ID 前使用 `\n`。

document.querySelector("#id") // => document.getElementById('id')
Enter fullscreen mode Exit fullscreen mode

按类别

要按类获取元素，请.在类名前使用 `\`。

document.querySelectorAll(".myElementClass")
Enter fullscreen mode Exit fullscreen mode

按标签名称

要按标签名称获取元素，只需输入标签名称即可。

document.querySelectorAll("body") // => document.getElementsByTagName('body')
Enter fullscreen mode Exit fullscreen mode

复制.getElementById和getElementsByTagName

  • 复制.getElementById
document.querySelector("#myDivId") // => document.getElementById('myDivId')
Enter fullscreen mode Exit fullscreen mode
  • 复制.getElementsByTagName
document.querySelectorAll("a") // => document.getElementsByTagName('a')
Enter fullscreen mode Exit fullscreen mode

所有元素

要获取所有元素，请使用*

document.querySelectorAll("*") // => NodeList[...]
Enter fullscreen mode Exit fullscreen mode

使用多个选择器

要使用多个选择器，我们用逗号将它们分隔开,。

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll("p, a") // => NodeList[p,a,a]
Enter fullscreen mode Exit fullscreen mode

更多元素

在上面的例子中，我们进行了基本的查询，但还可以做其他事情，例如按顺序或父元素获取元素。

获取元素子项

有两种变体，一种是获取元素的子元素，无论它在树中有多深；另一种是获取元素的直接子元素。

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <p>
                Hello i am a paragraph and here's
                <a href="https://anotherplace.com">a link</a>
            </p>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

以上面的 HTML 代码为例，我们将研究这两种变体。

  • 直系子女
document.querySelector("div > a") // => <a href="https://awesomeplace.com">Hey I am a link</a>
Enter fullscreen mode Exit fullscreen mode
  • 所有儿童
document.querySelectorAll("div a") // => NodeList[a,a]
Enter fullscreen mode Exit fullscreen mode

按顺序获取元素

实现这一点也有两种方法。请参考以下HTML代码。

<html>
    <body>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <pre>I should intervene but i wont</pre>
            <p>Hello i am another paragraph</p>
        </div>
        <p>Hello i am a paragraph</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • 放置于之后
document.querySelector("div + p") // => <p>Hello i am a paragraph</p>
Enter fullscreen mode Exit fullscreen mode
  • 前面是

使用时~，紧随其后的元素并不重要。

document.querySelector("a ~ p") // => <p>Hello i am another paragraph</p>
Enter fullscreen mode Exit fullscreen mode

我们可以看到，该pre元素本身并没有影响结果，因为它是否pre存在并不重要。但是，下面的选择器会失败，因为它会检查它正上方的元素。

document.querySelector("a + p") // => null
Enter fullscreen mode Exit fullscreen mode

按属性获取元素

属性选择器以开头[和结尾]，并按如下方式使用：

<html>
    <body>
        <p style="color:blue;">Hello i am styled</p>
        <p>Hello i have no style</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("p[style]") // => <p style="color:blue;">Hello i am styled</p>
Enter fullscreen mode Exit fullscreen mode

检查属性值

要检查属性值，我们使用=符号。

<html>
    <body>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector('a[href="https://awesomeplace.com"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>
Enter fullscreen mode Exit fullscreen mode

更多属性值

  • 检查属性是否以...开头
document.querySelector('a[href^="https://awesome"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>
Enter fullscreen mode Exit fullscreen mode
  • 检查属性是否以...结尾。
document.querySelectorAll('a[href$=".com"]') // => NodeList[a,a]
Enter fullscreen mode Exit fullscreen mode
  • 检查属性是否包含子字符串
document.querySelectorAll('a[href*="place"]') // => NodeList[a,a]
Enter fullscreen mode Exit fullscreen mode

高级选择器

  • ：重点

这将选中当前获得焦点的元素。

  • 已访问

此功能与标签一起使用a，并选择已访问过的链接。

  • ：关联

这也可用于a标签，但在此情况下，它会选择尚未访问过的链接。

  • 已启用

这将选择已启用（而非已禁用）的元素。

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll(":enabled") // => NodeList[p,p,a,a]
Enter fullscreen mode Exit fullscreen mode
  • 已禁用

此操作会选中已禁用的元素。

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector(":disabled") // => <button disabled="true"> I have been disabled </button>
Enter fullscreen mode Exit fullscreen mode
  • :第一个孩子

这将选择其父元素的第一个子元素。

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("p:first-child") // => <p>I am a paragraph</p>
Enter fullscreen mode Exit fullscreen mode
  • ：最后一个孩子

这将选择其父元素的最后一个子元素。

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("p:last-child") // => <a href="anotherplace.com">I am another link</a>
Enter fullscreen mode Exit fullscreen mode
  • el：第一个类型

这将选择其父元素的第一个子元素，并且该子元素的类型与el 元素相同。

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("a:first-of-type") // => <a href="https://awesomeplace.com">Hey I am a link</a>
Enter fullscreen mode Exit fullscreen mode
  • el：最后类型

这将选择其父元素的最后一个子元素，并且该子元素的类型与el相同。

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("p:last-of-type") // => <p>I am another paragraph</p>
Enter fullscreen mode Exit fullscreen mode
  • :not(选择器)

这将选择与选择器不匹配的元素。

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector(":not(a)") // => <p>I am a paragraph</p>
Enter fullscreen mode Exit fullscreen mode
  • :nth-child( n )

这将选择其父元素的第n个子元素。

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("div:nth-child(2)") // => <a href="https://awesomeplace.com">Hey I am a link</a>
Enter fullscreen mode Exit fullscreen mode
  • :nth-last-child( n )

这将选择其父元素的倒数第 n个子元素。

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector("div:nth-last-child(1)") // => <a href="https://anotherplace.com">I am another link</a>
Enter fullscreen mode Exit fullscreen mode

混搭

这些选择器可以组合使用，以执行一些复杂的检查。例如

  • 一个被禁用的“btn”类按钮
<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector('button.btn:disabled') // => <button disabled="true" class="btn">I am also disabled</button>
Enter fullscreen mode Exit fullscreen mode
  • 所有已禁用的按钮form
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelector('form > button:disabled') // => <button disabled="true">Clear inputs</button>
Enter fullscreen mode Exit fullscreen mode
  • a 内所有禁用按钮form和 a 外所有禁用按钮
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button>I am not disabled</button>
        <button class="btn">I am also not disabled</button>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]
Enter fullscreen mode Exit fullscreen mode
  • 所有外部链接
<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <a href="/otherpage.html">I will to the other pages</a>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
document.querySelectorAll('a[href^="https://"]') // => NodeList[a,a]
Enter fullscreen mode Exit fullscreen mode

要获取非外部页面的链接，请使用

document.querySelector('a:not([href^="https://"])') // => <a href="/otherpage.html">I will to the other pages</a>
Enter fullscreen mode Exit fullscreen mode

结论

以上只是在 JavaScript 中使用选择器的一些方法，如果您想了解更多信息，这里有一个指向 w3c 上 CSS 选择器参考的链接。

感谢阅读！

文章来源：https://dev.to/neutrino2211/using-css-selectors-in-javascript-3hlm
使用 Typed.js 为您的网站...
✨ GitHub Actions ...