HTML5: More on selectors
Last weekend I blogged on new addittions to the javascript Selector API: querySelector() and
querySelectorAll(). These two new methods enable you to find elements by
matching against a group of selectors. I only scratched the surface in
the previous post, that’s why you can find a few more examples in this
post. These examples should demonstrate the power and ease of use of the
new Selector API features. It’s impossible to show you all of the
selectors usages in just one post, that’s why I strongly encourage you
to have a look at the W3C Selectors
specifications.
I experimented on the asp.net homepage using the
IE9 developer
tools.
Attribute selectors
Select all elements which have an attribute named title.
document.querySelectorAll('[title]');
[object] {
length : 5,
0 : http://www.asp.net/,
1 : [object HTMLImageElement],
2 : http://www.asp.net/get-started,
3 : http://www.asp.net/downloads,
4 : http://www.asp.net/rss/spotlight
}
Select all elements where the title attribute has the value set to Rss.
document.querySelectorAll('[title=Rss]');
[object] {
length : 1,
0 : http://www.asp.net/rss/spotlight
}
Select all elements where the href attribute is set to
http://umbraco.org/ and where the target attribute is set to
_blank.
document.querySelectorAll('[href="http://umbraco.org/"][target="_blank"]');
[object] {
length : 1,
0 : http://umbraco.org/
}
Select all elements where the href attribute contains umbraco.
document.querySelectorAll('[href*="umbraco"]');
[object] {
length : 3,
0 : [object HTMLLinkElement],
1 : [object HTMLLinkElement],
2 : http://umbraco.org/
}
Class selectors
Find the first element where the class is set to .search_box.
document.querySelector('.search_box')
[object HTMLInputElement] {
jQuery1291484082884 : 1,
align : "",
border : "",
hspace : 0,
vspace : 0,
accept : "",
alt : "",
checked : false,
defaultChecked : false,
defaultValue : "Search"
...
}
Id selectors
Find the first element with the id #WLSearchBoxInput.
document.querySelector('#WLSearchBoxInput')
[object HTMLInputElement] {
jQuery1291484082884 : 1,
align : "",
border : "",
hspace : 0,
vspace : 0,
accept : "",
alt : "",
checked : false,
defaultChecked : false,
defaultValue : "Search"
...
}
Pseudo classes
Select the first hyperlink that is being hovered over.
document.querySelector('a:hover')
http://umbraco.org/ {
charset : "",
coords : "",
hash : "",
host : "umbraco.org:80",
hostname : "umbraco.org",
href : "http://umbraco.org/",
hreflang : "",
name : "",
pathname : "",
port : "80"
...
}
Select the third child element from the first element with the class .welcom_nav.
document.querySelector('.welcome_nav:nth-child(3)')
type : "",
compact : false,
currentStyle : [object MSCurrentStyleCSSProperties],
runtimeStyle : [object MSStyleCSSProperties],
accessKey : "",
className : "welcome_nav",
contentEditable : "inherit",
dir : "",
disabled : false,
id : ""
...
}
As you can see searching for elements with native javascript has become a lot easier. I tried to show some examples which can be applied to real life scenarios. Examples based on more complex scenarios can be found in the W3C Selectors specifications.