JavaScript Essentials: Execution Order, Selectors, DOM manipulation

By
Buyco
Published: July 7, 2010Posted in: Features, Weekly JavaScript WorkshopsTags:
JavaScript Essentials: Execution Order, Selectors, DOM manipulation

Example: Hide content

Overview

In this example, we’re going to hide content on the page DOM LOAD. If a page has a lot of copy/information and we want to display only relevant information, we can hide bits and pieces using Javascript. Of course you can hide content using CSS but that may hold some negative impacts with Google when they crawl our pages. By using Javascript we can hide content without Google knowing, and we kill 2 birds with 1 stone:

  1. Provide relevant information to the page visitors
  2. Do not sacrifice SEO for the user’s experience

After hiding the content, we still want to provide the user with the ability of toggling through it. We will go through that during the next week’s session. So, first we will go over the functionality of selecting content and hiding it. Consider the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> title </title>
</head>
<body>
<h1>This is the title</h1>
<h4>Section 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit tellus et dolor sodales bibendum. Vestibulum sagittis eros hendrerit tellus vestibulum egestas. Maecenas tincidunt eros gravida quam consequat a sollicitudin urna viverra. Suspendisse potenti.</p>
<h4>Section 2</h4>
<p>Fusce magna lorem, sodales hendrerit consectetur sed, elementum sed risus. Mauris consectetur pulvinar accumsan. Nullam ullamcorper placerat lacus eu feugiat. Pellentesque posuere est a turpis rhoncus sagittis. Sed non nulla a ante vulputate porttitor nec sed nunc. Proin rhoncus leo non ante hendrerit viverra. </p>
<h4>Section 3</h4>

<p>Donec tincidunt enim vel tortor consequat porttitor. Proin interdum mauris venenatis turpis vulputate quis pretium orci iaculis. Maecenas vel massa turpis. Fusce adipiscing vulputate enim. Nulla at nulla ac velit rutrum laoreet. </p>
</body>
</html>

We will keep this very simple, so all we’re going to do is hide all of the paragraphs except for the first one. We’re going to make a small change to the HTML, and add a class name to each of the paragraphs we want to hide. This will make it a lot easier to select only those paragraphs we want to hide. So, the last two sections should look something like this:

<h4>Section 2</h4>
<p class="extra-information">Fusce magna lorem, sodales hendrerit consectetur sed, elementum sed risus. Mauris consectetur pulvinar accumsan. Nullam ullamcorper placerat lacus eu feugiat. Pellentesque posuere est a turpis rhoncus sagittis. Sed non nulla a ante vulputate porttitor nec sed nunc. Proin rhoncus leo non ante hendrerit viverra. </p>
<h4>Section 3</h4>

<p class="extra-information">Donec tincidunt enim vel tortor consequat porttitor. Proin interdum mauris venenatis turpis vulputate quis pretium orci iaculis. Maecenas vel massa turpis. Fusce adipiscing vulputate enim. Nulla at nulla ac velit rutrum laoreet. </p>

Hiding the paragraphs

Based on the selectors we reviewed before the example, we can grab those two paragraphs:

  • Pure Javascript 
    // use the dom load function above
initDOMLoad(function() {

	// check compatibility
	if (document.getElementsByTagName) {

		// select the paragraphs
		arrParagraphs = document.getElementsByTagName('p');

		// iterate through the paragraphs
		for (i=0; i<arrParagraphs.length; i++) {

			// check if the paragraph has a specific class name
			if (arrParagraphs[i].className == 'extra-information') {

				// if it does, hide it!
				arrParagraphs[i].style.display = 'none';
			}
		}
	}
});

  • Prototype 
    // listen on dom load
document.observe('dom:loaded',function() {

	// select all of the paragraphs and invoke the hide() function on all
	$$('p.extra-information').invoke('hide');
});

  • jQuery 
    // listen on dom load
$(document).ready(function() {

	// select all of the paragraphs and hide()
	$('p.extra-information').hide();
});

Once again we see the benefit of using a javascript framework. There’s nothing wrong with writing JavaScript code from scratch. It just may take longer.

Review

This week we learn the order of which scripts are run on the page. We also look into modifying the DOM and using the aforementioned knowledge to do that at the most optimal time (on DOM load). You can really do some tricky things on the DOM load with JavaScript without sacrificing your SEO.

Download Example

References

About the Author

Designer, developer, and excellent napper.