querySelector,通配符匹配？

Question

有没有办法使用querySelector或进行通配符元素名称匹配querySelectorAll？我在属性查询中看到了对通配符的支持,但对于元素本身却没有.

我试图解析的XML文档基本上是一个扁平的属性列表,我需要找到名称中包含某些字符串的元素.

我意识到如果我需要这个XML文档可能需要重组,但这不会发生.

除了回到使用明显弃用的XPath(IE9丢弃它)之外的任何解决方案都是可以接受的.

Answer 1

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

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

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

如果你正在寻找的name属性刚刚替补id用name.

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

Answer 2

我喜欢许多早期的答案，但我更喜欢我的查询仅在类/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']")

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

参考：

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

Answer 3

我正在弄乱/沉思涉及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);
//> (...)

+

Answer 4

将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属性时就不会遇到干扰.

Answer 5

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

/**
 * 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"

Answer 6

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