Assignment: DOM Review

Click Here toReturn to Homework Page

Review and research the following terms or concepts related to the DOM and its role in displaying your web page.

1. Document Object
• "To render a document such as an HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named as "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. The DOM is also the way JavaScript transmits the state of the browser in HTML pages."-- Credit-- https://en.wikipedia.org/wiki/Document_Object_Model
2. Discuss how the browser renders your HTML and CSS into the document object
• "The DOM is formed from the HTML that is received from a server. Styles are loaded and parsed, forming the CSSOM (CSS Object Model). On top of DOM and CSSOM, a rendering tree is created, which is a set of objects to be rendered. The rendered tree reflects the DOM structure except for invisible elements (like the head tag or elements that have display:none set). Each text string is represented in the rendering tree as a separate renderer. Each of the rendering objects contains its corresponding DOM object plus the calculated styles. In other words, the render tree describes the visual representation of a DOM. For each rendered tree element, its coordinates are calculated, which is called "layout". Browsers use a flow method which only required one pass to layout all the elements (tables require more than one pass). Finally, this gets actually displayed in a browser window, a process called "painting"."-- Credit-- http://frontendbabel.info/articles/webpage-rendering-101/
3. Node
• "A node is an HTML element"-- Credit-- http://www.w3schools.com/js/js_htmldom_nodes.asp
4. Tree Structure
• The DOM is layed out in a tree structure. The tree starts with the trunk, and brnaches from there. There can be two, three, or many many more branches. each branch can have brnches, and so on. In the end, branches have leaves and leaves or the content you see.
5. Event Model or Event Handlers
• "Event handelers are the actions or interactions a user perform with the page. Clicking the mouse, pressing a key, etc..."-- Credit-- http://www.javascriptkit.com/javatutors/event1.shtml