WDI Fundamentals Unit 11
We can use existing objects (or ones we create ourselves) to pass around information and functionality.
Previously, you may have relied on
alert to give feedback to users, but these will only get you so far.
In this unit, we'll look at how we can provide more meaningful feedback and make our sites more user friendly by allowing users to interact with our site and see its contents update in real time.
Before we get too deep into the DOM (Document Object Model), let's watch a video to better understand how it works in the browser:
Let's walk through some of the primary aspects of the DOM.
1) The DOM allows you to find elements.
This allows us to search through and access elements on the page such as links, images, paragraphs, etc.
2) The DOM allows you to get content.
The DOM makes it easy to access content within a page, especially when you want to find out what information a user has entered into a form field.
The answers could include email addresses, first and last names, and more.
3) The DOM allows you to set content.
The DOM also allows us to dynamically update the content of the HTML elements on our page.
4) The DOM allows you to add animations and effects.
This is where things start to get fun! Maybe we want a dropdown menu to slide down when a user clicks on an icon. Or, maybe we want a "Success!" message to fade in when our user submits a form.
5) The DOM allows you to create event listeners.
We don't always want the final state of our page to be the same as its initial state.
To review, the DOM allows us to:
As we've seen, the browser pulls in these HTML documents, parses them, and creates object models of the pages in its memory.
This model is the Document Object Model (DOM).
The DOM is structured like a tree, which we (unsurprisingly) call the DOM Tree.
Each element in the HTML document is represented by a DOM node.
When the model is updated, those changes are reflected on screen.
As a note, you may sometimes hear developers use the terms "node" and "element" interchangeably.
They often say things like "Let's select an element to work with," instead of "Let's select a node to work with."
Here's how the DOM Tree structure works within the web page for a simple to-do list:
The DOM allows us to get and set attributes for these nodes.
In our to-do list, we can access and change its content — for example if we wanted to change the text in the third
<li> to read "Return library books — DONE!"
It's common for front-end developers to work with the DOM while developing. But, how do they do it?
Two words: Developer tools.
Most browsers offer a developer tools feature which allows users to inspect and play with the DOM.
For example, if you are using a Chrome browser, you can right-click anywhere within the site you're viewing and select "Inspect" to open Developer Tools.
Or you can type the following shortcuts:
Mac - Command + Shift + C
Windows / Linux - Ctrl + Shift + C or F12.
When you look at the "elements" panel in developer tools, you're seeing the browser's rendered version of HTML (the DOM).
It should look similar to your normal HTML, but you'll notice it isn't exactly the same.
If your HTML isn't properly structured (e.g. you're missing any required elements) the browser will fix its structure as it renders.
And, if you want to use JS to manipulate the DOM (by adding elements, for example), your DOM will render dynamically. On the other hand, your HTML wouldn't reflect these changes as it is static.
Here is what the DOM looks like with our new changes:
The DOM has changed quite a bit from our original HTML file.
We added a fourth list item that wasn't in our HTML file (Feed the cat)
We changed the background color of our first list item to yellow (notice the inline style attribute added to the first list item:
<li style="background-color: yellow;"> Call Mom </li>
We also updated the third list item to read "Return library books - DONE!"
So, the DOM is a (potentially) large object that describes the structure of our content. Because it's an object, we can use standard techniques to get and set data.
In the browser, the DOM is represented by the
document object. Luckily, JS specifies some built-in methods that make the DOM easier to us.