10.3: The Document Object Model
By the end of this lesson, you should be able to:
- Briefly explain the Document Object Model (DOM).
- Reference HTML elements using classes and IDs
- Perform basic DOM manipulation in the browser console.
Now we'll describe more about the browser environment we've been working with. This section is meant as a crash course on the rest of the browser system.
Here we can distinguish between domain knowledge - technical knowledge of a specific system, and general programming knowledge, which we've been focusing on during this course.
By now you should be familiar that while the browser primarily reads
index.html, the entire web page that is displayed is built from multiple files together, such as
styles.css. Even within
index.html, there is the
<body>elements, each of which contain child elements. Data from various sources together define the information and structure of the _document t_hat is processed and displayed by the browser.
When the document is processed by the browser, a set of objects are created that represents the document, along with pre-defined methods and functions that we can use.
We've already seen one:
console.log(). To be specific,
consoleis an object of the DOM created by the browser, which has a pre-defined
consolemethods include **
console,the other major objects that represent the DOM are
document. We will next explore the
documentobject and the
Open the console and type in the variable names
documentto see the values in the console. Click the triangles to the left of the output to see inside them. What is there?
document.head, or more generally:
document.children. We can then use nested object notation to access child elements, so
document.body.childrenwill access the first nested element in the
<body>. This clearly isn't intuitive, what if we were looking for a specific element?
document.querySelector()allows us to do just that. It takes in, as input, a search query and returns the first element in the DOM that matches. If we wanted to access a paragraph element, for example, we could use
If we wanted to access a specific paragraph, we can do so by referencing it's id or class by using a . or # prefix, respectively.
document.querySelector("#submit-button")will return the element that has the id "submit-button".
document.querySelector(".card")will return the first element that has the "card" class.
We can store the returned element in it's own variable, which will then allow us to access element properties or use other DOM methods on the element itself. Putting it all together:
var button = document.querySelector('#submit-button');
button.innerText = 'Click Me!';
Can you guess what
.innerTextis or does? What happens when you execute the code above in the console?
We have already seen how to use
document.querySelector()to access elements that are already on the page. What if we wanted to create a new element and add it to the document, without having to edit
We can use the DOM to create elements and put them on the page.
var coolParagraph = document.createElement('p');
coolParagraph.innerText = 'hey, cool!!!1!';
After we've created this element we need to tell the DOM to put it into the page.
- 1.Visit your deployed site and open the console.
- 2.Change the background colour of the
"container"using the DOM.
- 1.Hint: you may want to access the
styleattribute of the
- 3.Create and add a new HTML element to the page using the console.