DOM & Events

You've probably done this before, but to review, try typing this into the JavaScript console.

document

We're going to look at the Document Object Model again, in the context of events and functions.

Document Object Model

The DOM is the idea or structure behind an HTML page which allows us to connect our JavaScript program to the HTML.

For every node in the DOM, there are many properties and methods we can use to create, remove and modify elements of our HTML document.

Referencing elements in the DOM:

document.getElementById("container"); document.getElementsByClassName("slide"); document.getElementsByTagName("p"); document.querySelector("#container"); document.querySelectorAll(".slides"); document.querySelectorAll("p");

Note the spelling and punctuation of these methods, they have to be written exactly right.

.getElement is for ids, vs .getElements for class and tag names

DOM Tree

Ancestor

Parent

Sibling

Current

Child

Descendent

Child

Descendent

Sibling

We can access child and parent nodes:

var c = document.querySelector("#container"); console.log(c.firstChild); console.log(c.lastChild); console.log(c.childNodes);

And get the parent node or sibling node:

var children = c.childNodes; console.log(children[0].parentNode); console.log(children[0].previousSibling); console.log(children[0].nextSibling);

Creating and appending elements to DOM:

var message = document.createElement("div"); message.className = "message"; document.body.appendChild(message);

And removing them:

var messages = document.getElementsByClassName("message"); document.body.removeChild(messages[0]);

Creating and modifying style and content:

var message = document.createElement("div"); message.className = "message"; message.innerHTML = "This is a new message!"; message.style.color = "red"; c.appendChild(message);

You can access any style in any element:

var c = document.getElementById("container"); c.style.color = "green";

Add an image to the document:

var img = new Image(); img.src = "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"; var elem = document.createElement("div"); elem.appendChild(img); c.appendChild(elem);

Events

Any interactive program, including a website, needs to know when and how a user is interacting with the program interface.

For websites, the browser uses JavaScript to detect when the user has interacted with the document in a variety of ways, scrolling, clicking, hovering, key presses, etc.

Using JavaScript methods, we can detect events.

Some events:

addEventListener("click", function() { console.log("Hello"); }); addEventListener("scroll", function() { console.log("world."); }); addEventListener("resize", function() { console.log("Hey!"); });

window load

It's a good idea to load your code once the browser window has loaded all of the HTML and CSS. We can do this easily with the window object.

window.addEventListener("load", function() { // write program here });

Using addEventListener here is a good because it allows other event listeners to be added. Using an onload statement restricts other event listeners by binding the onload event to one statement.

window.onload = function() { // only this will happen };

event argument

Events have related information that we can access by adding an event argument:

addEventListener("keydown", function(event) { console.log(event); });

This is sometimes abbreviated as ev or even e.

Event targets

We can also bind events to specific elements in the DOM:

var b = document.querySelector("#button"); b.addEventListener("click", function(event) { console.log("You clicked me!"); });

Event statements

Many events have shorthand methods called Global Event Handlers like .onclick and .onscroll that can be used with DOM elements.

var b = document.querySelector("#onclick"); b.onclick = function(event) { console.log("You clicked me!"); };

Note: the disadvantage of this style of event is that it limits the element to only that event listener.

this

When using event listeners, the this keyword is bound to the DOM element that was targeted for the event. Using this we can get a reference to the element and it's properties.

var b = document.querySelector("#this-btn"); b.onclick = function(event) { console.log(this); };