Bootcamp
Searchโฆ
1.2: DOM Review
Introduction
The DOM (Document Object Model) is a set of nodes that represent the elements in an HTML document. Browsers generate the DOM automatically when they load HTML. The DOM is the interface through which our JS logic can update what's on screen and determine how user actions manipulate our UI.
DOM Inputs and Outputs
HTML differs from JS in that HTML has no logic, no control flow, and no dynamic data. The DOM allows us to use JS to manipulate HTML dynamically, where users provide input and JS modifies our HTML (through the DOM) to display relevant output. The following are potential DOM inputs and outputs.
Potential Inputs
- Any user mouse movement within the browser screen.
- Any element on the page they've clicked on.
- Any radio button, drop down or checkbox they've interacted with.
Potential Outputs
- Any HTML element, with any CSS style applied to it.
JS and the DOM allow us to receive any user interaction on a page and update that page's HTML accordingly.
How to Use the DOM
In practice, the DOM is the set of JS variables that represent all browser functionality.
console.log is an example of 1 such variable console, which allows us to output values in the browser console. Similarly, we will use other DOM variables to accept user inputs and provide outputs in the form of HTML elements.Other than
console, the major variables that represent the DOM are window and document. We can think of these variables as an API (Application Programming Interface) for the browser, where we can only perform logic that the browser allows us to via the window and document interfaces.Exercises
Window and Document Variables
- 1.Open the browser console and type
windowanddocument, 1 on each line, to see their values. - 2.Click the triangles next to the output to see inside the variables. What is there?
Handle User Interactions as Input "Events"
- 1.Look up how to "listen" for any HTML event: https://www.w3schools.com/jsref/met_document_addeventlistener.aspโ
- 2.You may also see this syntax which sets a callback function without storing that function in a separate variable. Such callback functions are called "anonymous functions"
1
button.addEventListener("click", function () {
2
console.log("clicked");
3
});
Copied!
Create Any HTML Output Using JS
- 1.
- 2.Add the element to the page with
appendChild: https://www.w3schools.com/jsref/met_node_appendchild.aspโ
Implement Basic DOM Manipulation with Starter Code
Implement basic DOM manipulation with the code provided below.
- 1.Read comments in below code to understand what's happening
- 2.
- 3.
- 4.Implement the below code in your copy of the repo
index.html
The following elements are manipulated by our JS using the DOM interface
1
<p>
2
<input id="starter-ex"/>
3
</p>
4
<button id="starter-button">submit me</button>
Copied!
script.js
1
// make a variable out of the input and button
2
var input = document.querySelector("#starter-ex");
3
var button = document.querySelector("#starter-button");
4
โ
5
// call this function
6
var myButtonClicked = function () {
7
// get the current value that's been typed into the input
8
var typedValue = input.value;
9
โ
10
// create a new h2
11
var newHtwo = document.createElement("h2");
12
โ
13
// set the text inside this new element
14
newHtwo.innerText = typedValue;
15
โ
16
// make the h2 appear on screen
17
document.body.appendChild(newHtwo);
18
โ
19
// empty out the HTML input
20
input.value = "";
21
};
22
โ
23
// say which function to call *when* the user clicks the button
24
button.addEventListener("click", myButtonClicked);
Copied!
Last modified 2mo ago