DOM - csusbdt/322-2016 GitHub Wiki

Overview

The abbreviation DOM stands for document object model. The DOM provides a way for Javascript to access HTML content in a Web page in an object-oriented way. This allows the Web application developer to control their Web pages through Javascript on the client side.

Many developers use jQuery to interact with the DOM. However, there are simple alternatives to jQuery in many cases. Regardless of whether you use jQuery or other similar library in the future, interacting directly with the DOM will help you understand what these libraries do and how they work. In this assignment, you will learn how to interact with a Web page directly with Javascript.

The MDN maintains comprehensive documentation on client-side Web development, including documentation on the Document Object Model.

Instructions

Do the first 3 tutorials from Javascript DOM Tutorials. You can skip Tutorial 4 and the final exercises at the end of tutorials 1 through 3.

Create 3 Web pages, one for each of the 3 tutorials. Each Web page should illustrate the concepts and techniques covered in the corresponding tutorial. In other words, each Web page should solve a problem similar to the one stated as an exercise at the end of the corresponding tutorial.

Notes

Tutorial 1 covers the following features for accessing HTML elements.

  • document.getElementById()
  • el.childNodes
  • el.firstChild and el.lastChild
  • el.nextSibling and el.previousSibling
  • el.parentNode

Tutorial 2 covers the following features for modifying HTML elements.

  • el.innerHTML (Don't use for security reasons.)
  • parent.removeChild (Needs to be called on the child's parent.)
  • el.appendChild (Can also be thought of as "moveChild" because it detaches from any existing parent.)
  • document.createTextNode()
  • document.createElement()

Tutorial 3 covers the following features for handling user input events.

  • el.onclick (Set to a callback function in which this refers to the element clicked. Not recommended because of possible conflict with libraries that set their own event listeners.)
  • el.style
  • el.addEventListener('click', listener, false) (The listener is called with an event object, which has target as a useful attribute.)
  • el.removeEventListener('click', listener, false)
  • Event listeners are called with event objects.
    • event.target is the element emitting the event.
    • event.preventDefault() supresses normal results of event.

Submission

Send the instructor an email with a link to your workspace. Include your name in the email and the text DOM Assignment in the subject line your email.