javascript - How to filter elements returned by QuerySelectorAll -
i'm working on javascript libarary, , use function match elements:
$ = function (a) { var x; if (typeof !== "string" || typeof === "undefined"){ return a;} //pick quickest method each kind of selector if(a.match(/^#([\w\-]+$)/)) { return document.getelementbyid(a.split('#')[1]); } else if(a.match(/^([\w\-]+)$/)) { x = document.getelementsbytagname(a); } else { x = document.queryselectorall(a); } //return single object if applicable return (x.length === 1) ? x[0] : x; }; there occasions want filter result of function, pick out div span, or #id div or other simple selector.
how can filter these results? can create document fragement, , use queryselectorall method on fragment, or have resort manual string manipulation?
i care modern browsers, , ie8+.
if want @ rest of library, it's here: https://github.com/timw4mail/kis-js
edit:
to clarify, want able $_(selector).children(other_selector) , return children elements matching selector.
edit:
so here's potential solution simplest selectors:
tag_reg = /^([\w\-]+)$/; id_reg = /#([\w\-]+$)/; class_reg = /\.([\w\-]+)$/; function _sel_filter(filter, curr_sel) { var i, len = curr_sel.length, matches = []; if(typeof filter !== "string") { return filter; } //filter tag if(filter.match(tag_reg)) { for(i=0;i<len;i++) { if(curr_sell[i].tagname.tolowercase() == filter.tolowercase()) { matches.push(curr_sel[i]); } } } else if(filter.match(class_reg)) { for(i=0;i<len;i++) { if(curr_sel[i].classlist.contains(filter)) { matches.push(curr_sel[i]); } } } else if(filter.match(id_reg)) { return document.getelementbyid(filter); } else { console.log(filter+" not valid filter"); } return (matches.length === 1) ? matches[0] : matches; } it takes tag div, id, or class selector, , returns matching elements curr_sel argument.
i don't want have resort full selector engine, there better way?
i don't think question right. why want "filter" result of queryselectorall() infact, kind of filter itself. if query div span or better #id div, results filtered, no ?
however, can apply array.prototype.filter static result of queryselectorall follows:
var filter = array.prototype.filter, result = document.queryselectorall('div'), filtered = filter.call( result, function( node ) { return !!node.queryselectorall('span').length; }); that code first use queryselectorall() query <div> nodes within document. afterwards it'll filter <div> nodes contain @ least 1 <span>. code doesn't make sense , demonstrative purposes (just in case member wants create donk comment)
update
you can filter element.comparedocumentposition. i'll tell if elements disconnected, following, preceding, or contained. see mdc .comparedocumentposition()
Comments
Post a Comment