如何在 JavaScript 中与 “querySelector()” 或 “querySelectorAll()” 进
How to do a wildcard element name match with "querySelector()" or "querySelectorAll()" in JavaScript?
有没有办法使用 querySelector
或 querySelectorAll
进行通配符元素名称匹配?
我尝试解析的 XML 文档基本上是一个属性的平面列表
- 我需要找到名称中包含某些字符串的元素。
- 我在属性查询中看到对通配符的支持,但看不到对元素本身的支持。
除了回到使用明显已弃用的XPath(IE9删除了它(之外的任何解决方案都是可以接受的。
> [id^='someId']
将匹配以 someId
开头的所有 ID
[id$='someId']
将匹配所有以 someId
结尾的 ID
[id*='someId']
将匹配包含 someId
的所有 ID。
如果您正在寻找name
属性,只需将id
替换为name
。
如果您谈论的是元素的标签名称,我不相信有办法使用querySelector
我在涉及 querySelector(( 的单行代码上搞砸/沉思,最后在这里,并使用标签名称和 querySelector(( 对 OP 问题有一个可能的答案,并@JaredMcAteer回答我的问题,也就是在原版 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属性时不会遇到干扰。
上面的许多答案,但我更喜欢我的查询只在类/ID 上运行,这样它们就不必遍历每个元素。这是来自@bigiCrab和@JaredMcAteer的代码的组合
// class exactly matches abc
const exactAbc = document.querySelectorAll("[class='abc']")
// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")
// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")
// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")
// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")
将"class"替换为"id"或"href"以获得其他匹配项。有关更多示例,请阅读下面链接的文章。
参考:
- MDN 上的 CSS 属性选择器:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
我刚刚写了这个简短的脚本; 似乎有效。
/**
* 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"
我正在寻找正则表达式 + 不是 + 多类选择器,这就是我得到的。
希望这能帮助寻找同样东西的人!
// 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
简单测试:https://codepen.io/BIgiCrab/pen/BadjbZe
例如,有一个如下所示的表单:
<form id="my-form" method="post">
<input type="text" name="my-first-name" value="John">
<input type="text" name="my last name" value="Smith">
</form>
然后,您可以根据 6.1 使用以下选择器。属性存在和值选择器 6.2.子字符串匹配属性选择器。
input[name]
选择具有name
属性的所有<input>
:
document.querySelectorAll('input[name]');
// "my-first-name" and "my last name"
input[name="my last name"]
选择name
属性正好my last name
的所有<input>
:
document.querySelectorAll('input[name="my last name"]');
// "my last name"
input[name~="name"]
选择其 name
属性的空格分隔单词包含 my last name
的所有<input>
:
document.querySelectorAll('input[name~="name"]');
// "my last name"
input[name|="my"]
选择所有name
属性从my
开头的<input>
,-
so my-
:
document.querySelectorAll('input[name|="my"]');
// "my-first-name"
input[name|="my last name"]
选择name
属性正好my last name
的所有<input>
:
document.querySelectorAll('input[name|="my last name"]');
// "my last name"
input[name^="my "]
选择name
属性从my
开始的所有<input>
:
document.querySelectorAll('input[name^="my "]');
// "my last name"
input[name$="ame"]
选择name
属性以 ame
结尾的所有<input>
:
document.querySelectorAll('input[name$="ame"]');
// "my-first-name" and "my last name"
input[name*="st-"]
选择其name
属性包含st-
的所有<input>
:
document.querySelectorAll('input[name*="st-"]');
// "my-first-name"
此外,根据 4.3,input:not([name="my last name"])
会选择其 name
属性不包含my last name
的所有<input>
。否定(匹配-无(伪类: ':not((':
document.querySelectorAll('input:not([name="my last name"])');
// "my-first-name"
而且,您可以将form#my-form
放在input[name^="my"]
前面,以更具体地选择<input>
,如逻辑 AND (&&(,如下所示:
document.querySelectorAll('form#my-form input[name^="my"]');
// "my-first-name" and "my last name"
而且,您还可以input:not([name^="last"]):not([name*="st"][value="Smith"])
更具体地选择<input>
,如逻辑 AND (&&(,如下所示:
document.querySelectorAll('input:not([name^="my-"]):not([name*="st"][value="John"])');
// "my last name"
而且,您还可以input[name*="first"], input[name="my last name"]
更具体地选择<input>
,如逻辑 OR (||(,如下所示:
document.querySelectorAll('input[name*="first"], input[name="my last name"]')
// "my-first-name" and "my last name"
有一种方法可以说什么不是。 只是让它永远不会成为的东西。一个好的 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;
}
- 没有找到相关文章