Java Reference
In-Depth Information
document.getElementsByClassName('walk').length;
<< 0
To access the paragraph element node, we use the index notation to refer to the first element
in the collection:
swim = document.getElementsByClassName('swim')[0];
<< <p class="swim">
This now refers to the actual paragraph element with a class of
swim
.
document.getElementsByClassName
is supported in all the major modern
browsers, but was only supported in Internet Explorer 9 and later.
Query Selectors
The
document.querySelector()
method allows you to use CSS notation to find the
first element in the document that matches a CSS query selector criteria provided as an ar-
gument. If no elements match, it will return
null
.
The
document.querySelectorAll()
method also uses CSS notation but returns a
node list of
all
the elements in the document that match the CSS query selector. If no ele-
ments match, it will return an empty node list.
These are both very powerful methods that can emulate all the methods discussed, as well
as allowing more fine-grained control over which element nodes are returned.
Note: Know Your Selectors
You do have to know about CSS query selectors to be able to use this meth-
od! If you don't know, or just need a reminder, you might want to check
this
For example, the following could be used instead of
document.getElementById()
:
bike = document.querySelector('#bike');
<< <p id="bike">
