Previously we used getElementById
to access DOM elements. Here are some more techniques:
getElementsByTagName
With document.getElementsByTagName
all of the occurrences of a specific element in the HTML can be targeted. The matches are returned as something known as a nodeList. A count of the matches (the length of the nodelist) can be returned with:
document.getElementsByTagName('strong').length;
Alternatively individually elements can be targeted using item
and in parenthesis the number of the node you wish to target, starting with 0, for example:
document.getElementsByTagName('strong').item(0);
Alternatively you can use standard array square bracket syntax and omit item
. Therefore the above example can also be written as:
document.getElementByTagName('strong')[0];
To do something useful with the targeted node we could use innerHTML
for example:
document.getElementsByTagName('strong').item(0).innerHTML = "I am the first node"; document.getElementsByTagName('strong')[1].innerHTML = "I am the second node";
getElementsByName
This selector sounds very similar to getElementsByTagName
described above but does do something entirely different. Notice that is is not ‘ByTagName’ this time but ‘ByName’. Many HTML elements can be use the name
attribute ie:
<input type="text" value="Bob" name="FirstName">
As the above example illustrates the name
attribute is heavily associated with form
elements and is fact crucial for data to be submitted in the name / value format used.
Therefore with document.getElementsByName
all of the occurrences of HTML elements of a specific ‘name’ attribute are selected. As with getElementByTagName
the matches are returned as a nodeList. A count of the matches (the length of the nodelist) can also be returned with:
document.getElementsByName('FirstName').length;
This selector is particular useful with radio buttons which will share the same name
attribute ie:
<label><input type="radio" name="filmRatings" value="1">1</label> <label><input type="radio" name="filmRatings" value="2">2</label> <label><input type="radio" name="filmRatings" value="3">3</label> <label><input type="radio" name="filmRatings" value="4">4</label> <label><input type="radio" name="filmRatings" value="5">5</label>
The radio buttons could all be targeted with:
var filmRatings = document.getElementsByName('filmRatings'); for(var i = 0; i < filmRatings.length; i++){ document.getElementById('ratings').innerHTML += filmRatings[i].value; }
querySelector
With document.querySelector
CSS selector techniques can be used to help make your selection. Take the following HTML:
<ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> <li>Pears</li> </ul>
We could have Javascript as follows:
document.querySelector('li').innerHTML = "Picked Fruit";
When using document.querySelector
only the first match is selected. Therefore, in the above example only the first <li>
is selected. The benefit of this technique is that CSS techniques like classes can also be used. Therefore taking the following HTML:
<ul> <li>Apples</li> <li>Bananas</li> <li class="orange">Oranges</li> <li>Pears</li> </ul>
… we could target the class
of ‘orange’ with:
document.querySelector('.orange').innerHTML = "Picked Fruit";
Again if there were multiple ‘orange’ classes only the first in the DOM would be picked.
querySelectorAll
A variant on document.querySelector
is document.querySelectorAll
that we can use to select all the occurrences of our CSS selector based search. It works just like document.getElementByTagName
in that it returns a nodelist with length and item Therefore to target the fourth occurrence of an element use:
document.querySelectorAll('li')item(3).innerHTML = "Picked Fruit";
… or
document.querySelectorAll('li')[3].innerHTML = "Picked Fruit";
We can select all the items that match a querySelectorAll
by working out the number of matches using querySelectorAll.length
and then looping around each matched item as follows:
document.getElementById('selectAll').onclick = function(){ var noItems = document.querySelectorAll('li').length; for(var i=0; i<noItems ; i++){ document.querySelectorAll('li')[i].innerHTML = "Picked Fruit" } }
Warning: Both querySelector and querySelectorAll don’t work in IE7 or earlier. So for users still living in caves some other approach is needed. Hmmm. See below.
Tip: Using CSS in this fashion is something that jQuery makes great use of and makes selecting DOM elements really straight forward (and works in older versions of IE).