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 we've included some functions for you:
    1. addClass() - adds a class to an element.
    2. getElementsByClassName() - returns a collection of elements by class name.
    3. removeClass() - removes a class from an element.
    4. hasClassName - returns true or false depending on whether the element has the given class name.
    5. highlight() - adds the "highlight" class to the passed-in node or nodes.
    6. unhighlight() - removes the "highlight" class from the passed-in node or nodes.
    7. unhighlightDays() - helper function removing the "highlight" class from all the td elements to reset the calendar.
    8. 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"). Note that every table element contains a rows array, so you can access the first row in a table with table.rows[0].
  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.

Solution:

HTMLDOM/Solutions/AccessingElements.html
---- C O D E   O M I T T E D ----
function offDays() {
		//first get the calendar by its ID
		var calendar = document.getElementById("calendar");		
		//from the calendar, get all the weekend days (the td tags with a css class of "off")
		var offDays = getElementsByClassName(calendar,"off");
		//first "unhighlight" all the days
		unhighlightDays();
		//now, highlight the "off" days
		highlight(offDays);
		return offDays;
	}
	
	function allDays() {
		
		//first get the calendar by its ID
		var calendar = document.getElementById("calendar");
		//from the caledar, get all the days (the td tags)
		var days = calendar.getElementsByTagName("td");
		//now, highlight all the "days"
		highlight(days);
		return days;
	}
	
	function firstDayOfMonth() {
		
		//first get the calendar by its ID
		var calendar = document.getElementById("calendar");
		//the "calendar" is a table, so it has rows. The first row in the calendar array is at index position 0 (the header)
		var headerRow = calendar.rows[0];
		//the 2nd row in the calendar array is at index position 1 (the first data row)
		var firstRow = calendar.rows[1];
		//get all the td tags
		var tds = firstRow.getElementsByTagName("td");
		//unhighlight all the days
		unhighlightDays();
		//loop all the td tags in the calendar
		for (var i=0; i<tds.length; i++) {
			//as you loop the td tags, if the html in "this" td tag is 1 (the 1st day of the month), then highlight this td tag
			if ( tds[i].innerHTML==1 ) {
				highlight(tds[i]);
				return tds[i];
			}
		}
	}
	
	function weekDays() {
		var weekDays;
		if ( document.querySelectorAll ) {
			
			//get all the days that are not of class "weekend" - in other words, get the weekdays
			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]);
				}
			}
		}
		//unhighlight all days first
		unhighlightDays();
		//now just highlight all the "weekDays"
		highlight(weekDays);
		return weekDays;
	}
	
	function weekDaysThisMonth() {
		
		//create empty array to receive days as we find them
		var weekDaysThisMonth = [];
		
		// start by getting all weekdays, regardless of month
		var days=weekDays();
		var i;
		//loop through all the week days, if it does NOT have a css class of "off", then add the day to the weekDaysThisMonth array.  
		//Note that the push() method simply adds an element to an array
		for (i=0; i<days.length; ++i) {
			if ( !hasClassName(days[i],"off") ) {
				weekDaysThisMonth.push(days[i]);
			}
		}
		//now unhighlight all the days
		unhighlightDays();
		//and finally, highlight all the "weekDaysThisMonth"
		highlight(weekDaysThisMonth);
		return weekDaysThisMonth;
	}
---- C O D E   O M I T T E D ----

Code Explanation

Next