Question

有没有办法使用querySelector或querySelectorAll进行通配符元素名称匹配？我看到在属性查询中支持通配符，但不支持元素本身。

我试图解析的XML文档基本上是一个扁平的属性列表，我需要找到名称中包含某些字符串的元素。

我意识到如果我需要这个XML文档可能需要进行重组，但这不会发生。

除了回到使用明显弃用的XPath（IE9删除它）之外的任何解决方案都是可以接受的。

Answer 1

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

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

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

如果您正在寻找name属性，请将id替换为name。

如果您在谈论元素的标记名称，我认为没有办法使用querySelector

Answer 2

我在涉及querySelector（）＆amp;的单行上搞乱/沉思结束了，＆amp;使用标签名称＆amp;可以回答OP问题。 querySelector（），带有@JaredMcAteer的信用来回答我的问题，又称与Regilla类似的匹配与查询调用（）在vanilla Javascript中

希望以下内容有用＆amp;符合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);
//> (...)

+

Answer 3

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

Answer 4

我刚写了这个简短的剧本;似乎工作。

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

Answer 5

有一种方法可以说不是。只是制造出从未有过的东西。一个好的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;
}

querySelector，通配符匹配？

5 个答案: