查询选择器获取属性以“xxx”开头的元素

Question

I am trying to get all items where the attribute starts with comp- . So, take this html for reference:

<h1 comp-Color="red">Hello, world!</h1>
<h1 comp-Background="black">Hello, world!</h1>
<h1 comp-Age="123">Hello, world!</h1>

I have tried doing this, but it doesn't seem to work:

let e = document.querySelectorAll('[^comp-]');

Doing so gives me the following error:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[^comp-]' is not a valid selector.

Answer 1

You can use xpath for such a task

eg to get all attributes that start with xxx- you use the xpath string

'//*/attribute::*[starts-with(name(), "xxx-")]'

or, shorthand for attribute:: is @ - which makes the above

'//*/@*[starts-with(name(), "xxx-")]'

quick sample code

var nodesSnapshot = document.evaluate('//*/attribute::*[starts-with(name(), "xxx-")]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var attr;
for (var i=0; i < nodesSnapshot.snapshotLength; i++ ) {
   attr = nodesSnapshot.snapshotItem(i);
   console.log(attr, attr.ownerElement) 
});

Further reading: XPATH on MDN

I haven't found a reliable source for more detailed documentation. document.evaluate is available in all browsers except IE, however, I do recall there is a library for xpath for IE - not sure how complete it is

google wicked good xpath

which is based on

javascript-xpath

Answer 2

我认为你可以使用[xxx*]这就是我和许多其他人信任的这个惊人资源所说的： https : //code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net -16048在 12 号。

Answer 3

Unfortunately, querySelectorAll does not support partials. However, there is a library dom-regex (Disclaimer: I wrote it), that does this.

It allows you to query the DOM with Regular Expressions. You can be as loose or strict as you want.

Query the entire DOM:

// Get all elements that have `comp-xxx="` in their opening tag
let e = DomRegex.all(/ comp-\w+="/i);

Less expensive:

Instead of querying the entire DOM, you can provide a selector or set of elements to query against:

let e = DomRegex.all.against('h1', / comp-\w+="/i);

---

Working Example:

 // Just include DomRegex here as a 1 liner: !function(r,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("DomRegex",[],t):"object"==typeof exports?exports.DomRegex=t():r.DomRegex=t()}(this,function(){return function(r){function t(e){if(n[e])return n[e].exports;var o=n[e]={exports:{},id:e,loaded:!1};return r[e].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return tm=r,tc=n,tp="",t(0)}([function(r,t,n){"use strict";function e(r){return"HTMLElement"in window?r&&r instanceof HTMLElement:!(!r||"object"!==("undefined"==typeof r?"undefined":d(r))||1!==r.nodeType||!r.nodeName)}function o(r){if(r instanceof RegExp)return!0;throw new TypeError("The regex parameter must be a Regular Expression")}function i(r){if(!r||"string"==typeof r)return!0;throw new TypeError("The attr parameter must be a non-empty String")}function u(r){if(e(r))return[r];if(r instanceof NodeList&&(r=Array.from(r)),Array.isArray(r))return r.filter(e);if(""!==r&&("string"==typeof r||r instanceof String))return Array.from(document.querySelectorAll(r));throw new TypeError("The first param should be a selectorOrDomNode")}function f(r){return r.outerHTML.match(/^<((?:[^>"]+|"[^"]*")+)>/)[1]}function a(r,t,n){var e=n?r.getAttribute(n):f(r);return t.test(e)}function c(r){return r?"filter":"find"}function l(r,t,n){o(t),i(n);var e=c(r);return Array.from(document.querySelectorAll("*"))[e](function(r){return a(r,t,n)})}function p(r,t,n,e){var f=u(t);o(n),i(e);var l=c(r);return f.map(function(r){return Array.from(r.querySelectorAll("*"))}).reduce(function(r,t){return r.concat(t)},[])[l](function(r){return a(r,n,e)})}function y(r,t,n,e){var f=u(t);o(n),i(e);var l=c(r);return f[l](function(r){return a(r,n,e)})}Object.defineProperty(t,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r};n(1),n(2);var s={all:function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return l.apply(void 0,[!0].concat(t))},one:function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return l.apply(void 0,[!1].concat(t))}};s.all.inside=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return p.apply(void 0,[!0].concat(t))},s.all.against=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return y.apply(void 0,[!0].concat(t))},s.one.inside=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return p.apply(void 0,[!1].concat(t))||null},s.one.against=function(){for(var r=arguments.length,t=Array(r),n=0;n<r;n++)t[n]=arguments[n];return y.apply(void 0,[!1].concat(t))||null},t.default=s,r.exports=t.default},function(r,t){"use strict";!function(){Array.prototype.find||(Array.prototype.find=function(r){if(null==this)throw new TypeError("Array.prototype.find called on null or undefined");if("function"!=typeof r)throw new TypeError("predicate must be a function");for(var t,n=Object(this),e=n.length>>>0,o=arguments[1],i=0;i<e;i++)if(t=n[i],r.call(o,t,i,n))return t})}()},function(r,t){"use strict";Array.from||(Array.from=function(){var r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t},e=Math.pow(2,53)-1,o=function(r){var t=n(r);return Math.min(Math.max(t,0),e)};return function(r){var n=this,e=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,u=arguments.length>1?arguments[1]:void 0;if("undefined"!=typeof u){if(!t(u))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,a=o(e.length),c=t(n)?Object(new n(a)):new Array(a),l=0;l<a;)f=e[l],u?c[l]="undefined"==typeof i?u(f,l):u.call(i,f,l):c[l]=f,l+=1;return c.length=a,c}}())}])}); // Get all elements that have `comp-xxx="` in their opening tag let e = DomRegex.all.against('h1', / comp-\\w+="/i); console.log(e);

 <h1 comp-Color="red">Hello, world!</h1> <h1 comp-Background="black">Hello, world!</h1> <h1 comp-Age="123">Hello, world!</h1> <h1>Hello World!</h1>

Answer 4

Folowing @wordSmith you can do something like this:

document.querySelectorAll("#selectId option[value*='G-']");

This means all options inside #selectId with a value that starts with 'G-'

Answer 5

Try this:

let e = document.querySelectorAll("[id^='comp-']");

Which was not working since I misread the question.

Edit :

Let me suggest this then:

var allH1 = document.querySelectorAll("h1");
[].forEach.call(allH1, function(d) {
    var a = [].filter.call(d.attributes, function(at) { return /^comp-/.test(at.name); });
    var attrName = a[0].name;
    var attrValue = a[0].value;
});