- Continue to learn how to access and use the Chrome Developer Tools
- Understand how to query and update a page after its been loaded
HTML ElementA building block that makes up the structure of a web page.
CSS SelectorA way to identify a set elements, typically using a tag, class or id.
Interfacea shared boundary across which two separate components exchange information.
DOMDocument Object Model, the JS interface used to interact with HTML
EventAny event which takes place in the DOM, these can be generated by users or the browser.
EventHandlerA function that will run when a specific event occurs
The Document Object Model (DOM)
The browser gives us some useful global objects for free. The
window object is the global object and it holds a lot of information about the browser window including it’s current location (URL), size, etc.
document contains a representation of the current web page.
document contains a bunch of methods that allow us to query the DOM. Today we are going to start by learning about
This method take a query selector—like you would use in CSS.
document.querySelector() returns the first element that matches the query.
Let’s say we have a page with the following markup:
Let’s try out some queries:
document.querySelector('p')will return just the first paragraph.
document.querySelector('#third')will return the paragraph with the id
For today’s lesson, we will only be working with
document.querySelector(). We will focus on how to best utilize
document.querySelectorAll() once we learn more about arrays and loops!
Updating our HTML
Elements have a number of useful properties and methods.
Let’s say we wanted to change the contents of our
The DOM has been updated to the following:
- Grab the first paragraph element and change the text to ‘The original paragraph’.
.innerText vs .innerHTML vs .textContent
<!-- The following line of HTML will be used in the next side track example --> <!-- Note the extra spaces after hello - that is intentional --> <p id="inner-text-example">Hello <span>1906</span></p>
Side Track: You may have heard about a few different ways to target/manipulate the text of an HTML page. The two most common are
innerHTML, with a third being
textContent. The first answer in this convo gives you a quick answer, but if you’re curious run the following few lines of code in your console:
var para = document.querySelector('#inner-text-example'); console.log(para.innerText); console.log(para.innerHTML); console.log(para.textContent);
MDN has a great description of the differences between
To sum up:
innerTextwill collapse all of the extra spaces and give you back JUST THE TEXT.
innerHTMLwill give you back the text, with any nested HTML elements printed out as well
textContentwill give you back an exact copy of JUST THE TEXT, leaving any spacing or formatting as is.
Visit this page and fork the CodePen.
- Find the
h1tag and change the header to “A Stellar Record of My Performance”.
- Find the element with the
hsand capitalize it’s name.
- Change the subject of each of the elements with the
- Find the element with the
messageand change the message to something warm and uplifting. Do the same with element with an
- Select an element and set
contentEditableto true. Now, click on the element. What happened?
- Take a look at the MDN documentation for DOM events. Can you bind a function to the click event of the element?
Adding Event Listeners
This is the crux of front-end engineering. We present a user interface and then as the user interacts with the UI, we change and update what they see.
Let’s take a look at the syntax and then we’ll talk about what’s happening.
- We’re querying for all of the elements we need and we’re storing them in variables.
- We’re adding an event listener to the
<button>with the class of
- We’re passing
- The type of event we’re interested in listening for.
- A function that should be called whenever that event happens.
- Create a function called
changeMessagethat executes the code you wrote for updating the element with a class of
- Add a
<button>to the HTML markup of the page.
- Add an event listener to that button.
- When the button is clicked, have your
Here is MDN’s master list of DOM events. Most of them are rare birds. Can you add additional events to the page?
If that list overwhelms you, here is a artisinal, hand-crafted list:
Changing Styles Programmatically
There are three approaches:
- We can directly manipulate the style of the element through inline styles.
- We can add or remove classes from the element (the preferred way).
We’re only going to talk about the first two today.
Consider the following:
- Add a button that changes the width of the box to 400px.
- Add a button that removes the border class from the box. (Hint: the method is called
Getting User Input from Forms
To access the value from an input element we can do the following
Let’s use this pen for practice
- Add an input field with the
idof “very-important-message” along with a button. When the user clicks on the button, it should set the
innerTextof the box to contents of the input field.
- Add two inputs one for a CSS property and one for a value. When the user clicks the button, it should adjust that property on the box.
- Here is an example of the second task:
- What is the DOM?
- How do we get information out of the DOM and into our JS?
- How do we add information to the DOM?
- How can we change the CSS of elements?
- What is the preferred method for updating our CSS using JS?