Most interesting applications of JavaScript involve making changes to the way web pages display in response to user actions.

For example, here is a page that allows a user to solve the FWGC and water jug problems: solve.html.

Using JavaScript to dynamically manipulate web pages requires more understanding of HTML and the associated Document Object Model (DOM).

Here is a simple HTML page:

An HTML page consists of nested elements, with html being the outer-most element.

Nested within the html element are the head and body elements, which themselves have nested elements.

Here is how a browser renders this page: mypage.html.

HTML elements provide the structure and content of web pages.

The nesting structure of elements within an HTML page can be represented by trees.

Shown below is an element tree for mypage.html.

Note that two of the elements, title and h1, also have text associated with them, though they are not shown here.

The W³ Schools HTML Tutorial is a good resource for learning about HTML.

The rendering of the problem solving web page solve.html is shown below on the left.

The layout of this page is achieved by using an HTML table element, whose structure is shown on the right.

The table is 7 rows × 2 columns, with several of the row elements spanning two columns:

Page Rendering	Table Structure

Creating tables in HTML usually involves the following elements:

• table: the top-level element representing the entire table
• tr: an element nested in a table element that represents a table row
• td: an element nested in a tr element that represents a cell within the row (table data)
• th: an element nested in a tr element that represents a cell within the row acting as a table header

Below is the element structure tree for the layout in solve.html.

Note the tr elements having only one child. These child elements span multiple columns in the table.

When a td or th element needs to span multiple columns, a colspan attribute can be used, like this:

   <td colspan="2" ... >
	

Here is the basic structure of the HTML code for the layout in solve.html:

The Document Object Model (DOM) is a programming interface for HTML and XML (Extensible Markup Language) documents:

• Provides a structured representation of the document
• Defines a way that the structure can be accessed from programs so that they can change the document structure, style and content

The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.

Essentially, it connects web pages to scripts or programming languages.

According to the DOM, everything in an HTML document is a node:

• The entire document is a document node
• Every HTML element is an element node
• The text in the HTML elements are text nodes
• Every HTML attribute (e.g., colspan) is an attribute node

The HTML DOM views an HTML document as a tree structure called the node tree.

All nodes can be accessed through the tree, and their contents can be modified or deleted, and new elements can be created.

The node tree shown below at the bottom shows the nodes associated with the following mypage.html and the connections between them.

The tree's root is the document node and branches out to the text nodes at the lowest level.

In order to programmatically manipulate DOM nodes with JavaScript, the nodes must be uniquely identified.

This is accomplished in the HTML code with id attributes.

Shown below is the HTML code for the table layout in solve.html with id attributes added.

This example also illustrates the following:

• Use of the HTML span element to display the specific problem name in the welcome string
• The textarea element is used to display the problem's current state
• A nested table element is used to display the problem's move buttons
• The input element is used to render the reset button
• The select element is used to render the problem selector
• The reset button and problem selector respond to events via the onclick and onchange attributes, respectively. These attributes have values that are JavaScript calls.

The DOM uses an object-oriented paradigm, with the objects, in this case DOM nodes, having both properties and methods.

Below are some properties of DOM nodes. For each of the following, x is an HTML element node.

• x.innerHTML — the text value of x
• x.nodeValue — the value of x
• x.parentNode — the parent node of x
• x.childNodes — the child nodes of x
• x.attributes — the attribute nodes of x

Below are some methods attached to DOM nodes.

• x.getElementById(id) — get the element of x with a specified id (x is usually a document node)
• x.appendChild(node) — insert a child node to x, an HTML element node
• x.removeChild(node) — remove a child node from x, an HTML element node