To access the paragraph element node, we use the index notation to refer to the first element
in the collection:
swim = document.getElementsByClassName('swim');
<< <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.
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">
Search WWH ::