Javascript 查询选择器，通配符元素匹配？

是否有一种方法可以使用

querySelector

或

querySelectorAll

进行通配符元素名称匹配

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

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

---

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

[id^='someId']

将匹配所有以

someId

开头的id

[id$='someId']

将匹配所有以

someId

结尾的id

[id*='someId']

将匹配包含

someId

的所有id

如果要查找

name

属性，只需将

id

替换为

name

如果您谈论的是元素的标记名，我认为没有一种方法可以使用

querySelector

第三方编辑 范例

• 查找其aria标签以

  Important\u foo开头的所有节点

• 对于找到的每个节点，将其aria标签记录到控制台

代码

---

将标记名设置为显式属性：

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

我没说会很漂亮：）

---

PS：我建议在标记名上使用

tag_name

，这样在读取“计算机生成的”隐式DOM属性时不会遇到干扰

我在一行涉及querySelector（）的语句上胡思乱想，最后在这里结束，并使用标记名和querySelector（）对OP问题有一个可能的答案，感谢@jaredmcater回答了我的问题，也就是说，在香草Javascript中有类似RegEx的与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);
//> (...)

---

我刚刚写了这篇短文；似乎有效

/**
 * 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选择器参考： 其中显示：not选择器，如下所示：

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

---

“名字”是指标签名吗？@Jaredcater的答案非常值得接受。请考虑。谢谢，我的意思是标签名。HMM我不能做文档。QueRealStudioAL（“div[ID$=’fo'”）期间可能会弄乱它。代码>文档。QueRealStudioAL（“div[ID$=’fo’]）<代码> IE8只有部分QSA支持，我认为它们只支持CSS2.1选择器，所以这些选择器将不会在IE8中工作，但是IE9+会起作用的。这个答案救了我的命！非常感谢。以下是CSS规范的主网站和querySelectorAll返回的关于属性选择器对象的最新信息，它们不一定在所有浏览器上都支持过滤器（因为它并不总是一个常规javascript数组）。在生成脚本之前（如果脚本是动态生成的），或者使用条件语句，请确保在生产中检查此断言。。。这是我找到的关于我的问题的最后一场比赛。我正在使用自定义元素，遗憾的是，像这样的功能仍然是手工操作。谢谢：document.queryselectoral（“a[href*=”）；也为我工作过（因此使用href而不是src）。Alhamdulillah！

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

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

div > :not(z){
 border:1px solid pink;
}