Module 4-02

Document Object Model

It’s a programming interface that represents an HTML or XML document as hierarchical tree structure of nodes and objects, allowing languages like JavaScript to interact with, modify, and update the page’s content, structure, and styles dynamically.

DOM tree

It is a representation of a parsed HTML document where:

• Nodes are represented elements, element attributes, textual content, and other HTML document components.

• Accessed through the Document object property of the Window object.

Basic DOM interfaces

Document, Node, Element, Event, Text, Attr

JS APIs

Aside from the Core JS Language, JS uses additional WEB APIs to access objects in the browser’s runtime environment and the HTML document

Browser Object Model (BOM) API

It is non-standard, and includes the following: Window, Navigator, Screen, Location, and History

Construct/Copy nodes

It is a DOM API functionality:

• createElement()

• createTextNode()

• createAttribute()

Node collections

It is a DOM API functionality:

• getElementById()

• getElementsByTagName()

• querySelector()

Traverse the DOM tree

It is a DOM API functionality:
- parentNode, parentElement, childNodes, children, firstChild, lastChild, nextSibling, previousSibling, firstElementChild, lastElementChild, etc.

Manipulate the DOM tree

It is a DOM API functionality:

• appendChild()

• removeChild()

• replaceChild()

Event Handling

It is a DOM API functionality:

• addEventListener()

• removeEventListener

Styles

It is a DOM API functionality:

• styleSheets

• cssRules

• insertRule

• getComputerStyle

HTML DOM API

This extends the DOM API for additional element-specific features.

• HTMLElement interface:(extends Element) and HTML element interfaces such as HTMLDivElement,

• HTMLParagraphElement, HTMLCanvasElement, MathMLElement) inherits from HTMLElement. Some properties of HTMLElement id, ClassName, innerHTML, hidden

SVG API

Events occur in the DOM as a result of user interaction or are generated by APIs to represent the status of tasks or DOM tree components (e.g., mouse click, loading of a page

currentTarget

listens for the event and may handle the event

Sampler Handler

Event Registration

associates the event and the event handler

Inline (non-standard)

An event registration that uses the HTML <event> attribute. The attribute’s value (such as handler()above) is copied to the DOM, and thus can be accessed by JS

Assigned through JS

An event registration that uses the DOM on the <event> property of the JS

object.

• The parentheses are omitted - the function itself is assigned to

• the property, not the function’s return value

• Only one handler can be registered to unassign (remove) the handler; assign null to the attribute

addEventListener and removeEventListener (standard)

An event registration where the argument to the method is the event itself

Multiple handlers can be registered with the same event

Browser

An execution environment where it can parse HTML, evaluate CSS, load images, download and execute JS, and render the page

Javascript

An execution environment where this may be top-level code: code outside functions and code inside functions

Top-level code

An execution environment where these are executed immediately, while functions need to be invoked first.

HTML Markup

This is fetched and parsed to build the document structure

(DOM tree) is created. A preload scanner fetches resources like CSS, JS, and fonts in the background while the main thread continues to build the DOM

These, if referenced, are fetched as well.

• The CSSOM tree is created, and the cascade is used to determine property values. Recursive calculation occurs when the DOM or CSS properties change.

• This does not block HTML but may block scripts (due to the effect of styles on elements / DOM objects).

Regular Scripts

These are downloaded as they are encountered and executed.

• Parsing, compilation, and interpretation are done on the main thread. Top-level code is executed immediately while blocking HTML.

• Background processes (e.g., code in web workers) will NOT block HTML.

• Likewise, external scripts with the async and defer attributes will behave differently.

DOMContentLoaded

The event fires when the initial HTML document has been completely loaded and parsed by the browser

CSSOM Tree

When this is completed, the DOM tree and this are combined to build the render tree. Every visible element’s layout, content, and computed style are determined and included in the render tree; elements in <head> and those with display:none are omitted

Size and Positions

These on the page are determined.

• The render tree is traversed from the <body>, and placeholders are set on the page for each object in the tree (layout & reflow).

• These are eventually painted on screen

load event

In the topic of Web Document Parsing, this is triggered after the entire page is rendered.

external script with defer attribute

Although the execution of a script blocks other tasks in the environment, note that this is downloaded asynchronously with HTML and other web resources, and executes only after the web document has been parsed and the needed styles are available, but before firing DOMContentLoaded

external script with async attribute

Although the execution of a script blocks other tasks in the environment, note that this is downloaded asynchronously with HTML and other web resources, and executes as soon as it has been fetched in full, but before the Load event is fired