DOM

What is the DOM?

The Document Object Model (DOM) connects web pages to scripts (usually JavaScript) or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them you can change the document's structure, style, or content.

The following is a brief list of common APIs in web and XML page scripting using the DOM.

• document.getElementById(id)

• document.getElementsByTagName(name)

• document.createElement(name)

• parentNode.appendChild(node)

• element.innerHTML (dangerous method, as we'll see later in the injection chapter)

• element.style.left

• element.setAttribute()

• element.getAttribute()

• element.addEventListener()

• window.content

• window.onload

• window.scrollTo()

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

How can I use the DOM?

You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard, but every web browser uses some document object model to make web pages accessible via JavaScript.

When you create a script–whether it's inline in a element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as displaying an alert message by using the alert() function from the window object, or it may use more sophisticated DOM methods to actually create new content.

Source attribution

Some parts of this page are based on Document Object Model (DOM) and Introduction to the DOM by Mozilla Contributors, which is licensed under CC-BY-SA 2.5.