有没有办法使用querySelector
或querySelectorAll
进行通配符元素名称匹配?我在属性查询中看到了对通配符的支持,但对于元素本身却没有。
我试图解析的XML文档基本上是一个扁平的属性列表,我需要找到名称中包含某些字符串的元素。
我意识到如果我需要这个XML文档可能需要重组,但这不会发生。
除了回到使用明显弃用的XPath(IE9丢弃它)之外的任何解决方案都是可以接受的。
[id^='someId']
将匹配所有以someId
开头的ID。
[id$='someId']
将匹配以someId
结尾的所有id。
[id*='someId']
将匹配包含someId
的所有id。
如果你正在寻找name
属性,只需用id
替换name
。
如果你在谈论元素的标签名称,我不相信有使用querySelector
的方法
我正在弄乱/沉思涉及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:我建议在tagName上使用tag_name
,这样在阅读'计算机生成',隐式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"
有一种说法是什么不是。只是做一些它永远不会成为的东西。一个好的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;
}