Equalizing the Browser DOMs - Exercise

Contact Us or call 1-877-932-8228
Equalizing the Browser DOMs - Exercise

Equalizing the Browser DOMs

Duration: 15 to 25 minutes.

In this exercise, you will write a function that removes all "empty" child text nodes (text nodes containing only whitespace) from an element. We will use this function to remove discrepancies across browsers caused by the different methods of handling whitespace between elements.

  1. Open HTMLDOM/Exercises/Hierarchy for editing.
  2. Notice that when any part of the body is clicked getNodeInfo() is called. The getTarget() function returns the element that was clicked (i.e, the target element). Don't worry about how it works now. We'll show you later in the lesson. Once known, the target element is passed to the getNodeInfo() function.
  3. Write a function called removeWhitespace(). The function should allow for a single node to be passed in and should iterate through that node's childNodes collection removing any text node made up of only whitespace (i.e, no non-whitespace characters).
  4. Modify the getNodeInfo() function so that it makes use of removeWhitespace() to clean all sibling and child whitespace-only text nodes of the passed-in node before creating the message.
  5. To test your solution, open HTMLDOM/Exercises/Hierarchy.html in a modern browser (not IE8 or before) and click on the middle list item. Both the previous and next siblings should now be list items as shown below:

Challenge

Make the removeWhitespace() function allow for recursive removal of whitespace and use it to remove all the whitespace-only text nodes from the DOM when the page loads.

Solution:

HTMLDOM/Solutions/Hierarchy.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
observeEvent(window,"load",function() {
	observeEvent(document.body,"click",function(e) {
		target = getTarget(e);
		getNodeInfo(target);
	});
});

function getNodeInfo(target) {
	removeWhitespace(target.parentNode,true);
	removeWhitespace(target,true);
	var msg = "<h2>You clicked on a <span>" + target.nodeName + "</span> element.</h2><ol>";
	msg += "<li>parentNode: <span>" + target.parentNode.nodeName + "</span></li>";
	if(target.firstChild) msg += "<li>firstChild: <span>" + target.firstChild.nodeName + "</span></li>";
	if(target.lastChild) msg += "<li>lastChild: <span>" + target.lastChild.nodeName + "</span></li>";
	if(target.nextSibling) msg += "<li>nextSibling: <span>" + target.nextSibling.nodeName + "</span></li>";
	if(target.previousSibling) msg += "<li>previousSibling: <span>" + target.previousSibling.nodeName + "</span></li>";
	msg += "<li>childNodes.length: <span>" + target.childNodes.length + "</span></li></ol>";
	document.getElementById("output").innerHTML=msg;
}

function removeWhitespace(node,recursive) {
	var childNode;
	for (var i=node.childNodes.length-1; i>=0; i--)	{
		childNode = node.childNodes[i];
		if (childNode.nodeType == 3 && !(/\S/.test(childNode.nodeValue))) {
			node.removeChild(childNode);
		}
	}
}
</script>
---- C O D E   O M I T T E D ----

Challenge Solution:

HTMLDOM/Solutions/Hierarchy-challenge.html
---- C O D E   O M I T T E D ----

observeEvent(window,"load",function() {
	removeWhitespace(document.body,true);
	observeEvent(document.body,"click",function(e) {
		target = getTarget(e);
		getNodeInfo(target);
	});
});
---- C O D E   O M I T T E D ----

function removeWhitespace(node,recursive) {
	var childNode;
	for (var i=node.childNodes.length-1; i>=0; i--)	{
		childNode = node.childNodes[i];
		if (childNode.nodeType == 3 && !(/\S/.test(childNode.nodeValue))) {
			node.removeChild(childNode);
		} else if (recursive && childNode.hasChildNodes()) {
			removeWhitespace(childNode,true);
		}
	}
}
---- C O D E   O M I T T E D ----
Next