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 window and document, 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.Create an HTML element with JS: https://www.w3schools.com/jsref/met_document_createelement.asp​
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.Clone this repo: https://github.com/rocketacademy/dom-starter-bootcamp​
3.Don't forget to run npm install in the starter code directory.​
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!

1.1.1: Basic HTML

1.2.1: Creating Elements

Last modified 2mo ago

Copy link

Contents

Introduction

DOM Inputs and Outputs

How to Use the DOM

Exercises

Window and Document Variables

Handle User Interactions as Input "Events"

Create Any HTML Output Using JS

Implement Basic DOM Manipulation with Starter Code