DOM methods and properties

Before you can use any of the DOM’s built-in functions, you have to tell your browser you want to access the API.

To do this you always have to type this piece of code at the start of an instruction for the DOM.

document.

Once you’ve told your browser you want to use the DOM, you then have to say which DOM functions you want to use. The DOM has built-in functions called methods and properties that allow you to change HTML elements.

A method is an action you can do, such as adding or removing a HTML element. A property is a value that you can access and change, such as setting the contents of a HTML element to a piece of text.

When you want to use a method or property, you separate the DOM keyword from the DOM method or property with a dot (.).

Because the DOM lets you access any HTML element in your web page, lots of DOM methods have the word “element” in them. Earlier you used a DOM method with JavaScript when you wrote this code:

document.getElementById("password");

Here we are telling our browser to use the DOM. Then we are asking to use a DOM method called getElementById to find a HTML element.

Finally, we’re directing our browser to find the HTML element with that specific id attribute, in this case, password.

When we use dots (.) to separate pieces of code we are using dot notation. The dot tells your browser you will be using DOM methods and properties.

Changing your app with the DOM

We can use a DOM method to find an HTML element in our app by its id attribute. We can then use a DOM property to change the contents of that element. Let’s take a look at how we do this.

Using the getElementById method

The getElementById method is a very handy way of finding a specific HTML element in your block of code. To use the getElementById method, you have to include the id attribute you gave to the HTML element in brackets after the keyword, like this:

document.getElementById("list");

Here we have asked our browser to find the HTML element in our web page that has the id attribute set to the value “list“.