QuerySelector 属性包含/以 JS 中的示例开头

作者

目录

QuerySelector attribute contains Examples using JavaScript

  1. QuerySelector 属性包含使用 JavaScript 的示例
  2. QuerySelector 类包含使用 JavaScript 的示例
  3. QuerySelector 属性以示例开头

QuerySelector 属性包含使用 JavaScript 的示例

要通过部分匹配属性值来获取 DOM 元素，请将以下选择器传递给方法querySelectorAll– '[title*="box"]'。

选择器匹配所有具有title包含字符串的属性的DOM 元素box。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div title="box1">Box 1</div>
    <div title="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.querySelectorAll('[title*="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('[title*="box"]');
console.log(box); // 👉️ div

我们使用document.querySelectorAll
方法来选择所有具有title包含字符串的属性的DOM 元素box。

该字符串可以位于属性值中的任何位置以匹配查询。

第二个示例使用
document.querySelector方法，该方法返回文档中与提供的选择器匹配的第一个元素。

简而言之，如果您要查找与提供的选择器匹配的单个元素，请使用querySelector()，如果您要查找元素的集合，请使用querySelectorAll()。

div您还可以通过仅查找具有包含 string 的属性的元素来使查询更具体box。

索引.js
const boxes = document.querySelectorAll('div[title*="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('div[title*="box"]');
console.log(box); // 👉️ div

querySelectorAll我们传递给和方法的选择器querySelector不会匹配任何spanorp元素，即使它们具有title包含 string 的属性box。

QuerySelector 类包含使用 JavaScript 的示例

要通过部分匹配类名来获取 DOM 元素，请将以下选择器传递给方法querySelectorAll– '[class*="box"]'。

选择器匹配类名包含字符串 的所有 DOM 元素box。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.querySelectorAll('[class*="box"]');
console.log(boxes); // 👉️ [div.box1, div.box2]

const box = document.querySelector('[class*="box"]');
console.log(box); // 👉️ div.box1

我们使用document.querySelectorAll
方法来选择所有具有包含字符串的类的 DOM 元素box。

该字符串可以位于类名中的任何位置以匹配查询。

第二个示例使用
document.querySelector方法，该方法返回文档中与提供的选择器匹配的第一个元素。

简而言之，如果您要查找与提供的选择器匹配的单个元素，请使用querySelector()，如果您要查找元素的集合，请使用querySelectorAll()。

div您还可以通过仅查找具有包含 string 的类的元素来使查询更具体box。

索引.js
const boxes = document.querySelectorAll('div[class*="box"]');
console.log(boxes); // 👉️ [div.box1, div.box2]

我们传递给该方法的选择器querySelectorAll不会匹配任何
spanorp元素，即使它们有一个包含 string 的类box。

QuerySelector 属性以 Examples 开头

要获取具有以特定值开头的属性的 DOM 元素，请将以下选择器传递给方法querySelectorAll–
'[title^="box"]'。

选择器匹配所有具有title以 string 开头的属性的DOM 元素box。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div title="box1">Box 1</div>
    <div title="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.querySelectorAll('[title^="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('[title^="box"]');
console.log(box); // 👉️ div

我们使用document.querySelectorAll
方法来选择所有具有title以 string 开头的属性的DOM 元素box。

您可能熟悉 care ^，它在正则表达式中使用时具有相同的含义。

The second example uses the
document.querySelector method,
which returns the first element within the document that matches the provided
selector.

In short, if you’re looking for a single element that matches the provided selector, use querySelector(), and if you’re looking for a collection of elements, use querySelectorAll().

You can also make the query more specific by only looking for div elements
that have an attribute value that starts with a specific string.

index.js
const boxes = document.querySelectorAll('div[title^="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('div[title^="box"]');
console.log(box); // 👉️ div

The selectors we passed to the querySelectorAll and querySelector methods
would not match any span or p elements even if they have a title attribute
that starts with the string box.

# Additional Resources

您可以通过查看以下教程来了解有关相关主题的更多信息：