有没有办法使用querySelectoror进行通配符元素名称匹配querySelectorAll？
我试图解析的 XML 文档基本上是一个简单的属性列表
- 我需要找到名称中包含某些字符串的元素。
- 我看到在属性查询中支持通配符，但不支持元素本身。
除了返回使用明显已弃用的 XPath（IE9 删除它）之外的任何解决方案都是可以接受的。
querySelector，通配符元素匹配？
IT技术
javascript
dom
domparser
selectors-api
2021-02-05 09:29:23
6个回答
[id^='someId']将匹配所有以someId.
[id$='someId']将匹配所有以someId.
[id*='someId']将匹配所有包含someId.
如果您正在寻找该name属性，只需id用name.
如果你在谈论元素的标签名称，我不相信有一种方法可以使用 querySelector
第三方编辑
例子
- 查找所有 aria-label 开头的节点
Important_foo - 对于找到的每个节点，将其 aria-label 记录到控制台
代码
var nodeList = document.querySelectorAll('[aria-label^="Important_foo"]');
nodeList.forEach(node=> { console.log(node.getAttribute("aria-label"))});
我正在搞乱/思考涉及 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);
//> (...)
将 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 属性时就不会遇到干扰。
我刚刚写了这个简短的脚本；似乎工作。
/**
* 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 + 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