DOM Manipulation

DOM stands for Document Object Model. We can change and modify the content of our web document (which is simply the website displayed in the browser) through JavaScript code, without making any changes to our .html file.

Here are some of the ways that we can do it.

Manipulating CSS Styles

In order to change CSS properties we need to select an element and assign it to a variable. Then we follow this pattern: element.style.property = 'value', where element stands for the variable name, property for a CSS property and value for a CSS value.

While single-word properties remain unchanged, multiple-word properties that are hyphenated in CSS need to be converted to camelCase.

Let's select and declare the element that we want to change.

Now let's change the color of our title.

Now let's change the background color of our title.

Let's change the font family of our title.

Let's center it.

Let's give it a border.