DOM

Now we can start use JavaScript to manipulate our HTML and CSS.

HTML and CSS are static — once we have written them, they display on the user’s devices exactly as we wrote them. However, when we add JS, we can make them more dynamic. With JavaScript, we can change CSS properties, content, HTML attributes, properties, and many other items any time we want.

To get an element that in on a page, we have two options:

• getElementById() : This method gets an element on a page by its id. They are a useful way to get access to a specific element quickly.

But what if we want to access multiple elements at once or we did not set an id on a single element?

• querySelector(): The querySelector method is much more versatile in terms of getting an element. We can use either an id or any CSS selector (even a mix) with querySelector to get one element.

querySelector is for one element only. Can only grab one element.
and if you want to grab more than one, use the querySelectorAll function.

Now what?

we call elements on a page with JavaScript, now we can change or manipulate them with those elements.

We can get and set the HTML content inside an element using the innerHTML property.