← Learn Javascript

Document Object Model (DOM)

Working with the dom

slides | md

Contents

  1. Introduction
  2. Selecting HTML elements 5 min
  3. Next steps
  4. Exercises
  5. References

Introduction

Review the following sections and perform the activities on your own or with your group.

Perform the task(s) when you see this 👉 emoji

Learning Objectives

Students who complete this module will be able to:

  • Demonstrate how to
  • Explain
  • Use Javascript to
  • List
Homework

About the DOM

  • Every time a web page loads, a new DOM object is created.
  • The DOM provides properties and methods for the page, as well as the potential to access (or change) all its HTML and CSS.

The window object

👉 View these properties and functions in the console (or access them with javascript using dot syntax).

  1. Type window and press return
  2. Expand a property {} or function f to see more.
  3. Functions can be called in the console: alert(123) or window.alert(123) and press return.

The document object

  • The window refers to the page and browser tab
  • While window.document (or just document) references the page structure, content, and properties for the page only.
  • 👉 Explore these in the console
// get web page url property
window.document.URL
// get background color property
window.document.bgColor
// change the bgColor property
window.document.bgColor = "red"

Selecting HTML elements

Many properties can be access with "vanilla" Javascript

// get the current URL
window.alert(document.URL);
// replace the content of the body
window.document.body.innerHTML = "😃"
// return an array of all <a> elements on the page: 
window.document.querySelectorAll("a")
// set a new location for this window: 
window.document.location = "https://davidson.edu"

Selecting HTML elements

  • There are several methods to select an element in the DOM.
  • document.querySelector() returns the first element that matches the specified selector.
<p id="greeting">Hello world</p>

// use #id to store reference to element
let ele = document.querySelector("#greeting");
// get the text
console.log(ele.textContent);
// or set the text
ele.textContent = "Hello world!";

Forms and Events

  • Add a submit listener to process each input in a web form.
  • Use preventDefault to prevent the form from loadinga new page.
<form action="#">
  <input type="text" id="color">
  <input type="submit">
</form>

document.addEventListener("submit", function(e) {
	e.preventDefault();
	let colorVal = document.getElementById("color").value;
	console.log(colorVal);
	document.body.bgColor = colorVal;
})

jQuery and The DOM

jQuery is a Javascript library you will see often in code references. It provides easy access to properties and methods in the HTML DOM, but it is better to learn "pure JS".

NOTE: youmightnotneedjquery.com

// select all divs, set backgrounds red
$('div').css({ 'background': 'red' });
// select all elements with myClass, add text to end
$('.myClass').append(' - here is some new text');

Forms and Events with jQuery

Overview: Events and using forms with Javascript and jQuery

NOTE: youmightnotneedjquery.com

// click event with callback
$('#submitButton').click(function() {
	// set the value of a form element
	$('#color').val("purple");
	// do not perform the default form action
	return false;
});

Next steps

  1. Try the Exercises below.
  2. Start working on homework listed in the schedule.
  3. Continue to the next lesson.

Exercises

👉 Try it out

  1. The Lottery v.2 - responding to events, The Lottery v.3 - displaying content in the browser
    • Already finished? Add a way to spend more money in the lottery game
  2. Exercises from Eloquent Javascript

References

Presentation comments ...