Javascript querySelector，通配符元素匹配？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8714090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
querySelector, wildcard element match?
提问by Erik Andersson
Is there a way to do a wildcard element name match using querySelectoror querySelectorAll? I see support for wildcards in attribute queries but not for the elements themselves.
有没有办法使用querySelectoror进行通配符元素名称匹配querySelectorAll？我看到在属性查询中支持通配符，但不支持元素本身。
The XML document I'm trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names.
我试图解析的 XML 文档基本上是一个简单的属性列表，我需要找到名称中包含某些字符串的元素。
I realize the XML document is probably in need of a restructuring if I need this but that's just not going to happen.
我意识到如果我需要这个，XML 文档可能需要重组，但这不会发生。
Any solution except going back to using the apparently deprecated XPath (IE9 dropped it) is acceptable.
除了返回使用明显已弃用的 XPath（IE9 删除它）之外的任何解决方案都是可以接受的。
回答by JaredMcAteer
[id^='someId']will match all ids starting with someId.
[id^='someId']将匹配所有以someId.
[id$='someId']will match all ids ending with someId.
[id$='someId']将匹配所有以someId.
[id*='someId']will match all ids containing someId.
[id*='someId']将匹配所有包含someId.
If you're looking for the nameattribute just substitute idwith name.
如果您正在寻找该name属性，只需id用name.
If you're talking about the tag name of the element I don't believe there is a way using querySelector
如果你在谈论元素的标签名称，我不相信有一种方法可以使用 querySelector
回答by StephaneAG
I was messing/musing on one-liners involving querySelector() & ended up here, & have a possible answer to the OP question using tag names & querySelector(), with credits to @JaredMcAteer for answering MY question, aka have RegEx-like matches with querySelector() in vanilla Javascript
我正在搞乱/思考涉及 querySelector() 的单行代码 & 最后到这里，& 使用标签名称 & querySelector() 对 OP 问题有一个可能的答案，感谢@JaredMcAteer 回答我的问题，也就是 RegEx 之类的与 vanilla Javascript 中的 querySelector() 匹配
Hoping the following will be useful & fit the OP's needs or everyone else's:
希望以下内容有用并适合 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"]');
Then, we can, for example, get the src stuff, etc ...
然后，例如，我们可以获取 src 内容等...
console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)
回答by Lorenz Lo Sauer
Set the tagName as an explicit attribute:
将 tagName 设置为显式属性：
for(var i=0,els=document.querySelectorAll('*'); i<els.length;
els[i].setAttribute('tagName',els[i++].tagName) );
I needed this myself, for an XML Document, with Nested Tags ending in _Sequence. See JaredMcAteeranswer for more details.
我自己需要这个，用于 XML 文档，嵌套标签以_Sequence. 有关更多详细信息，请参阅JaredMcAteer 的回答。
document.querySelectorAll('[tagName$="_Sequence"]')
I didn't say it would be pretty :)
PS: I would recommend to use tag_nameover tagName, so you do not run into interferences when reading 'computer generated', implicit DOM attributes.
我没有说它会很漂亮 :) PS：我建议使用tag_nameover tagName，这样在读取“计算机生成”的隐式 DOM 属性时就不会遇到干扰。
回答by cruzanmo
I just wrote this short script; seems to work.
我刚刚写了这个简短的脚本；似乎工作。
/**
* 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"
回答by Steve Lloyd
There is a way by saying what is is not. Just make the not something it never will be. A good css selector reference: https://www.w3schools.com/cssref/css_selectors.aspwhich shows the :not selector as follows:
有一种方法可以说不是什么。只是让不是它永远不会成为的东西。一个很好的 css 选择器参考：https: //www.w3schools.com/cssref/css_selectors.asp，它显示了 :not 选择器，如下所示：
:not(selector) :not(p) Selects every element that is not a <p> element
Here is an example: a div followed by something (anything but a z tag)
这是一个例子：一个 div 后跟一些东西（除了 az 标签之外的任何东西）
div > :not(z){
border:1px solid pink;
}
