Before we start learning the JavaScript commands that are used to change the DOM, I want to quickly talk about the DOM change process. I'd like you to have this process in your mind as we begin to learn the JavaScript commands so you know where they apply to the process. Now, the process is not difficult. It's only two steps. The first step is you need to select the DOM element. So a particular element you want to make a change to, you must select it first, there are JavaScript commands that are specific for selecting elements from the DOM.
We're going to learn multiple commands for doing that which command you choose to use depends on what you're trying to select. Now, if you've had any experience with CSS, you know that in writing CSS, you write selectors to select parts of the HTML document. Well, it's a similar type of process, except you'll be using JavaScript commands to do that. So that is step one, select the DOM element. Once you have the DOM element selected, then of course, you go ahead and change properties of that element. And when those properties, change the HTML page updates, and you will see the changes in the browser.
Now really quick two sample JavaScript commands that illustrate these two steps. So first, define a variable. And then using the assignment operator, we we set that variable equal to document notice we're using document document allows us to refer to the entire document and then a.so. This is a document object and we're able to use the get element By ID method and then inside the parentheses we pass in the ID of the element we're looking for. Now, this particular JavaScript command, searches the DOM for an element that has that ID, and then it selects it and place it places a reference to it in the LM variable. Once we have that reference, then we can make changes.
And in this example, JavaScript statement, we're simply changing the color. Whatever element we've selected, most of those elements have a style attribute. And that style attribute has a number of different attributes we can select one of which is color. So we select color using the dot syntax, and we set that equal to red and it would change the text of that element for example, to red. So that is the two step process that's required. When you're wanting to change DOM elements now let's start learning what some of the JavaScript commands are for selecting DOM elements.
And then we'll look at changes we can make