This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 5865 - [selectors-api2] Add method to check if a given element matches a selector
Summary: [selectors-api2] Add method to check if a given element matches a selector
Status: RESOLVED FIXED
Alias: None
Product: WebAppsWG
Classification: Unclassified
Component: HISTORICAL - Selectors API (show other bugs)
Version: unspecified
Hardware: PC All
: P2 enhancement
Target Milestone: ---
Assignee: Lachlan Hunt
QA Contact: public-webapps-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-07-14 08:31 UTC by Lachlan Hunt
Modified: 2009-09-26 21:49 UTC (History)
3 users (show)

See Also:

Attachments

Description Lachlan Hunt 2008-07-14 08:31:23 UTC 
There has been some suggestions to introduce a new Element.matchesSelector() method.

http://lists.w3.org/Archives/Public/public-webapi/2007Jan/0183.html
http://lists.w3.org/Archives/Public/public-webapi/2008Apr/0128.html
http://lists.w3.org/Archives/Public/www-style/2008Jul/0291.html

Need to investigate use cases.

Could possibly work something like this:

foo.matchesSelector("section>p");
foo.matchesSelector("h1+:context");

Returns boolean.
Comment 2 Lachlan Hunt 2008-12-08 15:08:57 UTC 
JQuery implementation
http://docs.jquery.com/Traversing/is#expr
Comment 3 Lachlan Hunt 2009-09-22 17:14:21 UTC 
Mozilla have begun work on an implementation
https://bugzilla.mozilla.org/show_bug.cgi?id=518003
Comment 4 John Resig 2009-09-22 17:46:22 UTC 
Test Suite can be found here:
http://github.com/jeresig/selectortest/tree/matchesSelector
Comment 5 Lachlan Hunt 2009-09-24 12:25:07 UTC 
Use Case: Event Delegation

Listening to events on occurring on many elements is made easier by event bubbling, and listening for the event on a common ancestor element of those you want to listen for.  This is commonly done on the body element.  The technique relies on the ability to check which element or type of element the event target is.

Having a function to check if the event target matches a particular selector makes this easier than having to manually check several different properties of the element.

For example, executing some function of the event handler may depend on the element being an input element that is a checkbox and has is checked (i.e. matches the selector "input[type=checkbox]:checked". Checking each of these propertie separately in order to determine how to handle the event is more complicated.
Comment 6 Lachlan Hunt 2009-09-24 22:16:29 UTC 
WebKit implementation.
https://bugs.webkit.org/show_bug.cgi?id=29703
Comment 7 Lachlan Hunt 2009-09-26 21:49:34 UTC 
matchesSelector() is now defined.