Accessing Elements - Exercise

Contact Us or call 1-877-932-8228
Accessing Elements - Exercise

Accessing Elements

Duration: 25 to 40 minutes.

In this exercise, you will practice using the methods for accessing elements.

  1. Open HTMLDOM/Solutions/AccessingElements.html in your browser. It will look like this:
  2. Click on the links and notice how the calendar changes. For example, click on Weekdays This Month and the calendar will appear as follows:
  3. Now open HTMLDOM/Exercises/AccessingElements.html in your editor.
  4. Notice that ClassFiles/lib.js is included and that there are four functions already written:
    1. highlight() - adds the "highlight" class to the passed-in node or nodes.
    2. unhighlight() - removes the "highlight" class from the passed-in node or nodes.
    3. unhighlightDays() - helper function removing the "highlight" class from all the td elements to reset the calendar.
    4. weekEndDays() - gets all the weekend days using the getElementsByClassName() helper function from the ClassFiles/lib.js library and passes it to the highlight() function after calling unhighlightDays() to reset the calendar.
  5. Complete the offDays() function to highlight the days that are not in the current month (that have the "off" class).
  6. Complete the allDays() function to highlight all the days of the month.
  7. Complete the firstDayOfMonth() function to highlight the first day of the current month (the one that contains a value of "1").
  8. Complete the weekDays() function to highlight all the week days. Use querySelectorAll if the browser supports it.
  9. Challenge: Complete the weekDaysThisMonth() function to highlight all the weekdays of the month. Hint: You can make use of the weekDays() function.

The weekDays() and weekDaysThisMonth() functions will break in IE8 because it does support the querySelectorAll() method, but does not support the specific CSS selectors passed to it. One way to handle this would be to use a try/catch block.

Solution:

HTMLDOM/Solutions/AccessingElements.html
---- C O D E   O M I T T E D ----
function offDays() {
		var calendar = document.getElementById("calendar");
		var offDays = getElementsByClassName(calendar,"off");
		unhighlightDays();
		highlight(offDays);
		return offDays;
	}
	
	function allDays() {
		var calendar = document.getElementById("calendar");
		var days = calendar.getElementsByTagName("td");
		highlight(days);
		return days;
	}
	
	function firstDayOfMonth() {
		var calendar = document.getElementById("calendar");
		var headerRow = calendar.rows[0];
		var ths = headerRow.getElementsByTagName("th");
		var firstRow = calendar.rows[1];
		var tds = firstRow.getElementsByTagName("td");
		unhighlightDays();
		for (var i=0; i<tds.length; i++) {
			if ( tds[i].innerHTML==1 ) {
				highlight(tds[i]);
				return tds[i];
			}
		}
	}
	
	function weekDays() {
		var weekDays;
		if ( document.querySelectorAll ) {
			weekDays = document.querySelectorAll("td:not(.weekend)");
		} else {
			var calendar = document.getElementById("calendar");
			var days = calendar.getElementsByTagName("td");
			var weekDays = [];
			for (var i=0; i<days.length; i++) {
				if ( !hasClassName(days[i],"weekend") ) {
					weekDays.push(days[i]);
				}
			}
		}
		unhighlightDays();
		highlight(weekDays);
		return weekDays;
	}
	
	function weekDaysThisMonth() {
		var weekDaysThisMonth=[];
		var days=weekDays();
		var i;
		for (i=0; i<days.length; ++i) {
			if ( !hasClassName(days[i],"off") ) {
				weekDaysThisMonth.push(days[i]);
			}
		}
		unhighlightDays();
		highlight(weekDaysThisMonth);
		return weekDaysThisMonth;
	}
---- C O D E   O M I T T E D ----
Next