Yorkville High School Computer Science Department
Yorkville High School Computer Science Department on Facebook  Yorkville High School Computer Science Department Twitter Feed  Yorkville High School Computer Science Department on Instagram

Yorkville High School Computer Science

ASSIGNMENTS: No Current Assignments

Web Design II for Developers :: Lessons :: Javascript

The DOM

The Document Object Model, or DOM, is a model that web browsers use to turn the HTML of a web page into the content of that page. A web browser uses the HTML on your page to render the page in the browser window, and we can use this fact to change items on a page without reloading the page.

The DOM is similar to a family tree in that there is a single node, or object in the tree, at the top that branches out into other node. In a family we would refer to the top node as the parent, while nodes underneath the parent are children, grandchildren, etc. The parent/child relationship is important in the DOM, as you can refer to the children of a node or the parent of a node. The image below shows the Document Object Model for a page on the YHSCS website.

YHSCS DOM Inspector
Document Object Model for YHSCS.us

While you should have a bit of an understanding of Javascript and programming from Web Design I and Computer Programming I, this course requires you to learn much more so you can manipulate web pages on the fly to create web apps. The W3Schools website is the best resource for you to use to learn Javascript.

Complete the following tutorials from the W3Schools website. You should take no more than five class periods to do so.

Javascript Tutorial
Javascript Forms Tutorial
Javascript Objects Tutorial
Javascript Functions Tutorial
Javascript HTML DOM Tutorial
Javascript BOM Tutorial

Javascript Quiz

Yorkville High School Computer Science Department on Facebook Yorkville High School Computer Science Department Twitter Feed Yorkville High School Computer Science Department on Instagram