219

有没有办法使用querySelectoror进行通配符元素名称匹配querySelectorAll？

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

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

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

4

6 回答 6

528

[id^='someId']将匹配所有以someId.

[id$='someId']将匹配所有以someId.

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

如果您正在寻找该name属性，只需替换id为name.

如果您在谈论元素的标签名称，我不相信有一种方法可以使用querySelector

第三方编辑

例子

  • 查找所有以 aria-label 开头的节点Important_foo
  • 对于找到的每个节点，将其 aria-label 记录到控制台

代码

var nodeList = document.querySelectorAll('[aria-label^="Important_foo"]');
nodeList.forEach(node=> { console.log(node.getAttribute("aria-label"))});
于 2012-01-03T15:19:53.347 回答
38

我在涉及 querySelector() 的单行代码上搞砸/沉思，最后在这里，并使用标签名称和 querySelector() 对 OP 问题有一个可能的答案，并感谢 @JaredMcAteer 回答我的问题，也就是类似于 RegEx与 vanilla 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);
//> (...)
于 2014-06-19T03:18:25.873 回答
14

将 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：我建议使用tag_nameover tagName，这样在读取“计算机生成”、隐式 DOM 属性时就不会遇到干扰。

于 2012-05-30T21:55:52.690 回答
11

我刚刚写了这个简短的脚本；似乎工作。

/**
 * 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"
于 2015-08-18T18:09:27.977 回答
2

我正在寻找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

于 2021-10-17T08:15:16.570 回答
-2

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

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

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

div > :not(z){
 border:1px solid pink;
}
于 2019-04-20T19:28:52.000 回答