Match dom
Hundreds of millions of singles have used our brands' dating products to create meaningful connections. Match pioneered the concept of online dating over 20 years ago, then reinvented the category by launching Tinder. Our diverse portfolio of apps and products enables connections across the spectrum of age, gender, and dating goals. For IR related inquiries: IR match. For PR inquiries: publicrelations match.
Investor Relations
By using our site, you acknowledge that you have read and understand our Cookie Policy , Privacy Policy , and our Terms of Service. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Is there any way to test if a selector would match a given DOM Element? Preferably, without the use of an external library like Sizzle.
This is for a library and I would like to minimize the amount of third party plugins required for the "core" library. If it ends up requiring Sizzle I'll just add that as a plugin to the library for those who want the feature it would enable.
EDIT : After thinking about it more, I came up with a solution, this technically works, but it doesn't seem optimal in terms of efficiency:. Basically the function queries the entire document with the given selector, and then it iterates over the nodeList.
If the given element is in the nodeList, then it returns true, and if it isn't it will return false. If anyone can come up with a more efficient answer I would gladly mark their response as the answer. I also found the equivalent for Chrome version compatibility unknown, and it may or may not work on Safari or other webkit browsers : webkitMatchesSelector , which is basically the same as the Firefox implementation.
I have not found any native implementation for the IE browsers yet. Since that specification is still a draft and there is a lag time before popular browsers implement the methods once it becomes the standard, it may be a while until this actually usable. Good news is, if you use any of the popular frameworks, chances are they probably implement this functionality for you without having to worry about cross browser compatibility.
Although that doesn't help those of us who can't include third party libraries. For the benefit of those visiting this page after lo these many years, this functionality is now implemented in all modern browsers as element. For best performance , use the browser implementations moz webkit o ms matchesSelector where possible. When you can't do that, here is a manual implementation. Here's an approach that handles this situation.
If it turns out the the element in question is not attached to the document, crawl up the tree to find the highest ancestor the last non-null parentNode and drop that into a DocumentFragment. Here's a document structure we'll be working with. We'll grab the. Here is a matchesSelector function that uses document. The fix requires searching whatever subtree that element happens to be in.
Here's an updated function named matchesSelector2. Now we see that matchesSelector2 works even though the element is in a subtree that is detached from the document. You can see this working at jsfiddle. An important note is that jQuery's is implementation is much faster. The first optimization I would look into is avoiding crawling up the tree if we don't have to.
To do this you could look at the right-most part of the selector and test whether this matches the element. However, beware that if the selector is actually multiple selectors separated by commas, then you'll have to test each one. At this point you're building a CSS selector parser, so you might as well use a library. In the absence of xMatchesSelector , I'm thinking to try adding a style with the requested selector to a styleSheet object, along with some arbitrary rule and value that is not likely to be already in use.
Something like this for IE:. There's probably a handbag full of gotcha's with this method. Probably best to find some obscure proprietary CSS rule that is less likely to have a visual effect than z-index , but since it is removed almost immediately after it is set, a brief flicker should be the only side effect if that. Also a more obscure rule will be less likely to be overridden by a more specific selector, style attribute rules, or other! Anyway, worth a try at least. I'm dealing with this issue now.
If your situation is similar, here's an option for you to consider:. When you're handed the DOM node and a selector, make a shallow copy of the node as well as its parent. This will preserve all of their attributes but won't make copies of their respective children.
Attach the cloned node to the cloned parent. Use querySelector on the cloned parent -- the only thing it needs to search is the only child node it has so this process is constant time.
It will either return the child node or it won't. It may be worth creating a complete chain of shallow-copied parents all the way up to the root node and querying the mostly empty dummy root if you'd like to be able to test your node's relationship to its ancestors. Off the top of my head I'm not sure what portion of selectors this would work for, but I think it'd do nicely for any that didn't worry about the tested node's children. I decided to write the function to shallow copy everything from the node being tested to root.
Using this, a lot more selectors are employable. Nothing related to siblings, though. Learn more. Test if a selector matches a given element Ask Question. Asked 9 years, 10 months ago. Active 1 month ago. Viewed 15k times. For the above example, the usage would be: element.
W3C Usage: element. Cristian Sanchez Cristian Sanchez I can't imagine how you'd do this - assuming you want to support a broad range of selectors, or all CSS2 or 3 selectors - without getting awful close to reimplementing Sizzle anyway. Because that's already optimized and debugged, why not just use it? Pointy: I was hoping there was a way to do it "natively" with the built in selector engine in modern browsers via querySelector and querySelectorAll.
If not, like I said, I will resort to using a library but delegate this feature to a plugin so Sizzle isn't required for my "core" library.
Firefox 3. Flavius Stef: It doesn't look like there's any cross browser way to do it yet, but thanks for the link, I followed it to the W3C's level 2 specification to find that they have addressed this, so it's only a matter of the spec being finalized and browsers implementing it.
If not, I will edit it into my post. Using Modernizr, you can do Modernizr. Active Oldest Votes. Try in your console: document. An important case to consider is testing selectors for elements not attached to the document. Here is the code. The document Here's a document structure we'll be working with. Chris Calo Chris Calo 6, 6 6 gold badges 39 39 silver badges 54 54 bronze badges. MooGoo MooGoo Interesting solution!
Have you tried doing this? Does it work efficiently? Mar 19 '12 at Clever solution, but it only works for elements currently attached to the document. Wow that's what i'm talking about! Flavius Stef Flavius Stef Thanks for the reply. I'm already using querySelectorAll, but it doesn't let you choose what elements it will test on.
It selects from the whole document. The spec contains this example, so you probably could use it like element. So far the only thing I can come up with is run the selector on the whole document, and iterate through the results to see if my element is in the NodeList.
Sounds awfully inefficient though. If your situation is similar, here's an option for you to consider: When you're handed the DOM node and a selector, make a shallow copy of the node as well as its parent.
Modern browsers can do it with the document. Dagg Nabbit Dagg Nabbit That is not the question. The OP has an element, and wants to know if it matches a particular selector. Just use an id for your element?
It's for a library, so I don't know what specifically they will be using it for. Matching only by ID would be virtually useless in the context of the library a form validation library. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.
Match is an online dating service with web sites serving over 50 countries in twelve languages. Its headquarters are in Dallas, Texas. The company has offices in. The matches() method checks to see if the Element would be DOM The definition of 'rainbowconnections.co.nzs' in that specification.
Take advantage of this Match. Click now to sign up for free for 3 days. This is the best age for dating!
By using our site, you acknowledge that you have read and understand our Cookie Policy , Privacy Policy , and our Terms of Service. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.
The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2. The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS.
The document
Match is an online dating service with web sites serving over 50 countries in twelve languages. Match was founded by Gary Kremen and Peng T. Ong in Founder Kremen left the company in March , after disagreements with venture capitalists. In September , Match.
