CSCI 121 - Lecture 15 - Document Object Model

Topics Covered

The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:

HTML DOM
HTML DOM is a standard object model and programming interface for HTML that defines:

The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

<html>
<body>

<p id="demo">

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

The getElementById Method - The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.
When passing the id of the current element to a function, say via the onclick event, consider using this.id rather than the literal id.

The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element, including <html> and <body>.

Method	Description
element.innerHTML = new html content	Change the inner HTML of an element
element.attribute = new value	Change the attribute value of an HTML element
element.setAttribute(attribute, value)	Change the attribute value of an HTML element
element.style.property = new style	Change the style of an HTML element

Method	Description
document.createElement(element)	Create an HTML element
document.removeChild(element)	Remove an HTML element
document.appendChild(element)	Add an HTML element
document.replaceChild(element)	Replace an HTML element
document.write(text)	Write into the HTML output stream

Note: w3schools.com is a good resource for the default style of the H1 element.