Selecting DOM Elements

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";

View The Demo

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;
}

View The Demo

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"	
	}
}

View The Demo

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).

Leave a Reply

*