querySelector，通配符元素匹配?

是否有一种方法可以使用querySelector或querySelectorAll进行通配符元素名称匹配?

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

  • 我需要找到在名称中有特定字符串的元素。
  • 我看到在属性查询中支持通配符，但不支持元素本身。

任何解决方案都是可以接受的，除了使用明显已弃用的XPath (IE9放弃了它)。

200099 次浏览
小开

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

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

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

如果你正在寻找name属性，只需用name替换id。

如果你说的是元素的标签名，我不相信有使用querySelector的方法

小开

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

小开

我在涉及querySelector() &的一行程序上搞混/沉思;结束在这里，&使用标签名得到OP问题的可能答案&querySelector()，以@JaredMcAteer回答我的问题，也就是在香草Javascript中与querySelector()有rerex一样的匹配

希望以下内容对您有所帮助&满足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);
//> (...)
小开

我只是写了这个简短的剧本;似乎有用。

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

有一种方法是说什么是什么不是。只要把不是的变成永远不会成为的。一个好的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;
}
小开

我正在寻找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选择器doc: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

小开

我喜欢上面的许多答案，但我更喜欢我的查询只在类/ 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

提交答案