是否有一种方法来做一个通配符元素名称匹配使用querySelector或querySelectorAll?
我试图解析的XML文档基本上是一个属性的平面列表
我需要找到在名称中有特定字符串的元素。 我看到在属性查询中支持通配符,但不支持元素本身。
任何解决方案都是可以接受的,除了使用明显已弃用的XPath (IE9放弃了它)。
是否有一种方法来做一个通配符元素名称匹配使用querySelector或querySelectorAll?
我试图解析的XML文档基本上是一个属性的平面列表
我需要找到在名称中有特定字符串的元素。 我看到在属性查询中支持通配符,但不支持元素本身。
任何解决方案都是可以接受的,除了使用明显已弃用的XPath (IE9放弃了它)。
当前回答
有一种方法可以把存在的东西说成不是。只要把不是的变成永远不会成为的。一个好的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;
}
其他回答
有一种方法可以把存在的东西说成不是。只要把不是的变成永远不会成为的。一个好的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;
}
我只是写了这个简短的剧本;似乎有用。
/**
* 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"
我正在寻找regex +不是+多类选择器,这就是我得到的。
希望这有助于有人寻找同样的事情!
// 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
我在涉及querySelector()的一行程序上搞混/思考,并在这里结束,并有一个可能的答案,使用标记名称和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);
//> (...)
我喜欢上面的许多答案,但我更喜欢我的查询只在类/ 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”以获得其他匹配项。阅读下面链接的文章以获得更多的例子。
参考:
MDN上的CSS属性选择器:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors