如何在 JavaScript 中将通配符元素名称与“querySelector()”或“querySelectorAll()”进行匹配？

问题描述 投票：0回答：8

有没有办法使用 

querySelector
或 
querySelectorAll
进行通配符元素名称匹配？

我尝试解析的 XML 文档基本上是一个简单的属性列表

  • 我需要查找名称中包含某些字符串的元素。
  • 我看到属性查询中支持通配符，但不支持元素本身。

除了返回使用明显已弃用的 XPath（IE9 已放弃它）之外，任何解决方案都是可以接受的。

javascript dom css-selectors domparser selectors-api
8个回答
660
投票

[id^='someId']
将匹配所有以 
someId
开头的 id。

[id$='someId']
将匹配所有以 
someId
结尾的 id。

[id*='someId']
将匹配所有包含 
someId
的 id。

如果您正在寻找 

name
属性，只需将 
id
替换为 
name
。

如果您正在谈论元素的标签名称，我不相信有办法使用 

querySelector

50
投票

我正在搞乱/沉思涉及 querySelector() 的单行文字，最后来到这里，并使用标签名称和 querySelector() 对 OP 问题有一个可能的答案，感谢 @JaredMcAteer 回答我的问题，又名 RegEx-就像普通 Javascript 中的 querySelector() 的匹配

希望以下内容有用并适合OP或其他人的需求：

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

然后，我们可以，例如，获取 src 等东西......

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)
23
投票

我喜欢许多早期的答案，但我更喜欢我的查询仅在类/ID 上运行，这样它们就不必迭代每个元素。以下通配符选择器是 @bigiCrab 和 @JaredMcAteer

的组合 
// class exactly matches abc
const exactAbc = document.querySelectorAll("[class='abc']")

// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")

// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")

// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")

// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")

用“id”或“href”替换“class”以获得其他匹配项。请阅读下面链接的文章以获取更多示例。

参考：

  1. MDN 上的 CSS 属性选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
16
投票

将 tagName 设置为显式属性：

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

我自己需要这个，用于 XML 文档，嵌套标签以 

_Sequence
结尾。有关更多详细信息，请参阅 JaredMcAteer 答案。

document.querySelectorAll('[tagName$="_Sequence"]')

我没说它会很漂亮:) PS：我建议在 tagName 上使用 

tag_name
，这样在读取“计算机生成的”隐式 DOM 属性时就不会遇到干扰。

13
投票

我刚刚写了这个简短的脚本；似乎有效。

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"
9
投票

我正在寻找 regex + not + multiClass选择器，这就是我得到的。

希望这可以帮助正在寻找同样东西的人！

// contain abc class
"div[class*='abc']" 

// contain exact abc class
"div[class~='abc']" 

// contain exact abc & def(case-insensitively)
"div[class~='abc'][class*='DeF'i]" 

// contain exact abc but not def(case-insensitively)
"div[class~='abc']:not([class*='DeF'i])"

css 选择器文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

简单测试：https://codepen.io/BIgiCrab/pen/BadjbZe

1
投票

比如有一个如下图的表格：

<form id="my-form" method="post">
  <input type="text" name="my-first-name" value="John">
  <input type="text" name="my last name" value="Smith">
</form>

然后，您可以根据6.1 使用下面这些选择器。属性存在和值选择器和6.2。子字符串匹配属性选择器.

input[name]
选择所有具有 
<input>
属性的 
name
：

document.querySelectorAll('input[name]');
// "my-first-name" and "my last name"


input[name="my last name"]
选择 
<input>
属性恰好为 
name
:
 的所有
my last name

document.querySelectorAll('input[name="my last name"]');
// "my last name"


input[name~="name"]
选择 
<input>
属性的空格分隔单词包含 
name
的所有 
my last name
：

document.querySelectorAll('input[name~="name"]');
// "my last name"


input[name|="my"]
选择所有 
<input>
属性从 
name
开始且带有 
my
的 
-
，因此 
my-
:

document.querySelectorAll('input[name|="my"]');
// "my-first-name"


input[name|="my last name"]
选择 
<input>
属性恰好为 
name
:
 的所有
my last name

document.querySelectorAll('input[name|="my last name"]');
// "my last name"


input[name^="my "]
选择所有 
<input>
属性从 
name
开始的 
my
：

document.querySelectorAll('input[name^="my "]');
// "my last name"


input[name$="ame"]
选择所有 
<input>
属性以 
name
结尾的 
ame
：

document.querySelectorAll('input[name$="ame"]');
// "my-first-name" and "my last name"


input[name*="st-"]
选择 
<input>
属性包含 
name
的所有 
st-
：

document.querySelectorAll('input[name*="st-"]');
// "my-first-name"

此外，根据

4.3，
input:not([name="my last name"])
选择所有
<input>
属性不包含
name
的
my last name。否定（匹配无）伪类：':not()':

document.querySelectorAll('input:not([name="my last name"])');
// "my-first-name"

并且，您可以将 

form#my-form
放在 
input[name^="my"]
前面来选择 
<input>
，具体如下所示： 逻辑与 (&&)：

document.querySelectorAll('form#my-form input[name^="my"]');
// "my-first-name" and "my last name"

并且，您还可以执行 

input:not([name^="last"]):not([name*="st"][value="Smith"])
来选择 
<input>
，更具体地说，如 逻辑 AND (&&)，如下所示：

document.querySelectorAll('input:not([name^="my-"]):not([name*="st"][value="John"])');
// "my last name"

并且，您还可以执行 

input[name*="first"], input[name="my last name"]
来选择 
<input>
，更具体地说，如 逻辑 OR (||)，如下所示：

document.querySelectorAll('input[name*="first"], input[name="my last name"]')
// "my-first-name" and "my last name"
-3
投票

有一种方法可以说不是什么。只是让它成为永远不会成为的东西。一个好的 css 选择器参考： https://www.w3schools.com/cssref/css_selectors.asp 显示 :not 选择器如下：

:not(selector)  :not(p) Selects every element that is not a <p> element

这是一个示例：一个 div 后跟一些东西（除了 z 标签之外的任何东西）

div > :not(z){
 border:1px solid pink;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.