Introduction to DOM methods and properties

DOM methods are actions that can be performed on DOM objects.

DOM properties are the values of the objects that can be added or changed.

Examples of actions we can do are to create new elements, add attributes, changes the content of an HTML element etc.

<p class="example">Hello</p>
document.getElementsByClassName("example")[0].innerHTML = "Hello DOM!";

In the above example, the getElementsByClassName() is the method, whereas the innerHTML is the property.

You have already see the innerHTML property in action on Submodule 6.1: The model of event-driven programming and Submodule 6.3: Applying the "if" statements.

It is important to note that using this property we cannot add new content to content that already exists since the Javascript clears out whatever might already be inside the element.

On the The HTML DOM Element Object page, you can see a list of the different DOM methods and properties.