CSE 154

Lecture 7: More Events and DOM Manipulation in JS

Agenda

Continue with JavaScript Events

Introduce some new DOM manipulation with JS

Reminders and Administrivia

HW1 late submissions still open

CP2 released now, go play around with JS!

Quiz grades will be released soon. Will discuss the answers briefly on Friday.

Question from last lecture

What is the difference between a node and an element?

JS Events

Event Handling

We can use JavaScript to attach functions to elements when an event (e.g. "click") occurs.

To do so, we need to:

1. Identify the source element to listen for an event
2. Indicate the event to trigger a response
3. Specify the response function(s) to call when the event is triggered.

Once we have this information, we can use addEventListener to hook everything up!

Event handler syntax

What's the difference?

vs.

addEventListener with multiple events

addEventListener with the Launchpad

Ed lesson

removeEventListener

Event Objects!

Recall that the event handler function can be attached to objects (window, DOM elements, etc.)

source.addEventListener("click", responseFunction);
      
          function responseFunction(e) {
          // we can access the click Event object here!
          }

JS

When the event occurs, an Event object is created and passed to the event listener. You can "catch" this event object as an optional parameter to get more information about the event.

Example: event-objects.html

Common Types of JavaScript Events

You can find a full list here

Creating, Adding, and Removing DOM Elements

Creating New Elements

// create a new <h2> node
let newHeading = document.createElement("h2");
newHeading.textContent = "This is a new heading!";

JS

Note: Merely creating an element does not add it to the page

You must add the new element as a child of an existing element on the page...

Adding Nodes to the DOM

When you have a parent DOM node, you can add or remove a child DOM node using the following functions:

let li = document.createElement("li");
li.textContent = "A list item!";
id("my-list").appendChild(li);

JS

Removing Nodes from the DOM

When you have a parent DOM node, you can remove a child DOM node using the following functions:

qs("#my-list li:last-child").remove();
/* or */
let li = qs("#my-list li:last-child");
li.parentElement.removeChild(li);
              

JS

An Aside

One more alias function!

When creating new DOM elements using JS, you may use document.createElement often.

We have added one more alias function, gen to include with id, qs, and qsa.

function gen(tagName) {
    return document.createElement(tagName);
}

JS

Example

Literal HTML: Ed lesson

Moving Elements Around

Moving Nodes around the DOM

When you have a parent DOM node, you can add or remove a child DOM node using the following functions:

Look familiar?

DOM Traversal Methods

We can use the DOM tree to traverse parent/children/sibling relationships (e.g. to remove an element from its parent node)

Every node's DOM object has the following (read-only) properties to access other DOM nodes in the tree:

These are common traversal properties we'll see, but you can find a complete list here.

Node vs Element

All objects in the DOM are Nodes, but not all Nodes are Elements (of the HTML variety).

An example:

Call document.getElementById("example").children and document.getElementById("example").childNodes on me!

Example

Scrambled: Ed lesson

DOM Tree Traversal Example

<div id="container">
  <div id="column1">
    <div>1</div>
    <div id="box2">2</div>
    <div>3</div>
  </div>
  <div id="column2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

id("container").children; // [#column1, #column2]

id("column1").firstElementChild;
id("container").firstElementChild.firstElementChild;
id("box2").previousElementSibling;
// all three ways to get <div>1</div>

id("box2").nextElementSibling; // <div>3</div>

id("column2").lastElementChild; // <div>6</div>

id("box2").parentNode.parentNode; // #container

More questions from this lecture?

Especially if you're watching a recording, write your question on PollEverywhere and I'll answer them at the start of next lecture.

Either on your phone or computer, go to PollEv.com/robcse