General Assembly

Introduction to the DOM

Wilson Espina

Review

What did we do last lesson?

Introduction to the DOM

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Describe the differences between the DOM and HTML
  • Use the browser’s developer tools to navigate and interact with the DOM
  • Select and create DOM nodes with vanilla JavaScript

Introduction to the DOM

Agenda

  • Introduction to the DOM
  • Selecting elements in the DOM
  • CSS Selectors
  • Creating DOM nodes with vanilla JS

Introduction to the DOM

Exit Ticket Questions

  1. It would be useful to send install instructions ahead of class so we could get a chunk of it done beforehand and deal with any issues ahead of the class.

Ajax & APIs

Homework Review

Introduction to the DOM

Classroom Resources

  1. Pull changes from the wilson-espina/jsd-9-resources repo to your computer:
    • Open the Terminal
    • cd to the Documents/JSD/jsd-9-resources directory
    • Type git pull origin master and press return
  2. In your editor, open the following folder: Documents/JSD/jsd-9-resources/08-intro-dom

Ajax & APIs

Document Object Model

Introduction to the DOM

HTML snippet

Introduction to the DOM

DOM Tree

DOM process diagram
  • The browser pulls in this HTML document, analyses it, and creates an object model of the page in memory.
  • This model is called the Document Object Model (DOM).
  • The DOM is structured like a tree.

Introduction to the DOM

DOM Tree

DOM tree
  • Each element in the HTML document is represented by a DOM node.

Introduction to the DOM

DOM Nodes

DOM node single
  • Nodes can be accessed and changed using JavaScript.
  • When the model is updated, those changes are reflected on screen.

Introduction to the DOM

Developer Tools

Chrome dev tools screenshot
  • In Chrome, you can go to View > Developer > Developer Tools and click on the Elements panel to take a look at the DOM tree.

Code along

Code Along
Code Along

Introduction to the DOM

HTML and the DOM

Web Page Elements

Web page elements HTML

DOM Tree

Basic DOM tree 1

Introduction to the DOM

HTML and the DOM

Web Page Elements

Web page elements HTML

DOM Tree

Basic DOM tree 2

Introduction to the DOM

HTML and the DOM

Web Page Elements

Web page elements HTML

DOM Tree

Basic DOM tree 3

Introduction to the DOM

The Document Object

  • The DOM is created by the Browser.
  • The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.
Basic DOMbasic

Discussion - HTML and the DOM

Discussion

Key Objective

  • Identify differences between the DOM and HTML

Type of Exercise

  • Pairs

Timing

3 mins
  1. Discuss how the DOM is different from a page’s HTML.
  2. Add the differences to Slack Thread.

Introduction to the DOM

DOM Manipulation

Introduction to the DOM

Basic Steps

General Assembly website JS steps

Introduction to the DOM

Selecting Elements in the DOM

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

Lets us select DOM elements using CSS selector syntax

Introduction to the DOM

CSS Selectors

Introduction to the DOM

Select All Instances of div elements

'div'


div {
  color: red;
}

Introduction to the DOM

Select an element with an ID of main

'#main'


#main {
  color: red;
}

Introduction to the DOM

Select all elements with a class of button

'.button'


.button {
  color: red;
}

Introduction to the DOM

Select all Paragraph and List Item elements

'p, li'


p, li {
  color: red;
}

Introduction to the DOM

Select all anchor links within divs

'div a'


div a {
  color: red;
}

Lab - CSS Selectors Refresher

Exercise

Key Objective

  • Use css selectors to isolate DOM elements

Type of Exercise

  • Group Activity 2-3 people

Location

Timing

10 mins
  1. Open the CSS Diner Exercise in your browser
  2. Answer questions 1 - 10
  3. BONUS: Answer questions 11 - 17

Introduction to the DOM

querySelector()

  • Takes a single argument, a string containing CSS selector.

HTML


<body id="main">
  ...

</body>

JavaScript


document.querySelector('#main')

Introduction to the DOM

querySelector()

  • Selects the first DOM element that matches the specified CSS selector.

HTML

HTML queryselector screenshot

JavaScript


document.querySelector('li')

Introduction to the DOM

querySelectorAll()

  • Takes a single argument, a string containing CSS selector.
  • Returns a NodeList, which is similar to an array.

HTML

HTML querySelectorAll screenshot

JavaScript


document.querySelectorAll('li')

Introduction to the DOM

Altering DOM Elements

Introduction to the DOM

What can we do with a selected element?

  • Get and set the HTML within it with the innerHTML property
  • Get and set its attribute values by referencing them directly (id, src etc.)

Introduction to the DOM

innerHTML

  • Gets the existing content of an element, including any nested HTML tags.

const item = document.querySelector('li')

console.log(item.innerHTML)
// Gets value: 'Lorem ipsum'

Introduction to the DOM

innerHTML

  • Sets new content in an element, including nested HTML tags.

const item = document.querySelector('li')

item.innerHTML = 'Toast';
// Sets value: 'Toast'

Introduction to the DOM

className property

  • Gets an element's class attribute value.

const item = document.querySelector('li')

console.log(item.className);
// Gets value: ''

Introduction to the DOM

className property

  • Sets an element's class attribute value.
  • CSS style sheet would have style rules for intended application of class name.

const item = document.querySelector('li')

item.className = 'selected';
// Sets value: 'selected'

Introduction to the DOM

classList.add method

  • Add specific class attribute value(s)

const item = document.querySelector('li')

item.classList.add('selected');
// Adds value: 'selected'

Introduction to the DOM

classList.remove method

  • Removes specific class attribute value(s)

const item = document.querySelector('li')

item.classList.remove('selected');
// Removes value: 'selected'

Code along

Code Along

Open up: 00-dom-codealong

Code Along

Lab - DOM Exercise

Exercise

Key Objective

  • Use vanilla JavaScript methods and properties to access DOM nodes.

Type of Exercise

  • Individual

Location

  • starter-code > 01-dom-exercise > app.js

Timing

6 mins
  1. Open starter code in your editor.
  2. Follow the instructions in to write code that selects and modifies the indicated elements and content in PARTS 1 - 3
  3. BONUS - Target the third element by reading up on the css selector nth-of-type

Lab - DOM Attributes Exercise

Exercise

Key Objective

  • Use vanilla JavaScript methods and properties to create and modify DOM nodes.

Type of Exercise

  • Individual or Pair

Location

  • starter-code > 02-dom-attributes-exercise > app.js

Timing

6 mins
  1. Open starter code in your editor.
  2. Follow the instructions to write code that selects and modifies the indicated elements and content.
  3. BONUS - Use a forEach loop to iterate through DOM elements.

Introduction to the DOM

DOM Creation Methods

Introduction to the DOM

Adding Content to the DOM

  • Create a new element with document.createElement()
Adding to DOm step 1

Introduction to the DOM

Adding Content to the DOM

  • Create a new element with document.createElement()
  • Add content to that element with a property such as textContent, innerHTML, or src.
Adding to DOm step 2

Introduction to the DOM

Adding Content to the DOM

  • Create a new element with document.createElement()
  • Add content to that element with a property such as textContent, innerHTML, or src.
  • Attach the new element to the DOM with appendChild()
Adding to DOm step 3

Introduction to the DOM

createElement()

  • Creates new element in memory (it's not attached to the DOM).
  • Assign it to a variable so you can reference it later.

const item1 = document.createElemement('li');
const item2 = document.createElemement('li');

Introduction to the DOM

innerHTML

  • Specifies text content of an element.
  • May include nested HTML tags.

item1.innerHTML = '<strong>Tea</strong>'
item2.innerHTML = '<em>Coffee</em>'
item3.innerHTML = 'Just normal text'

Introduction to the DOM

appendChild()

  • Attaches element or node as child of a selected element in the DOM.
  • Syntax: parent.appendChild(child)

const list = document.querySelector('ul'); // selects ul element

list.appendChild(item1); // adds item1 li to list ul
list.appendChild(item2); // adds item2 li to list ul

Code along

Code Along

Open up: 03-create-append-codealong

Code Along

Lab - Add content with JavaScript

Exercise

Type of Exercise

  • Individual

Location

  • starter-code > 04-create-append-exercise

Timing

Until 20:45
  1. Open preview.png. Your task is to use DOM manipulation to build the sidebar shown in the image and add it to the blog.html web page.
  2. Open app.js in your editor, then follow the instructions to create and the “About us” heading and the 2 paragraphs of text to the sidebar.
  3. BONUS 1: Open preview-bonus.png, then write JavaScript code to add the image shown to the sidebar. (Filename and location in app.js.).
  4. BONUS 2: Create and append the “Recent issues” heading and list.

Introduction to the DOM

Learning Objective

Learning Objectives - Review

  • Describe the differences between the DOM and HTML
  • Use the browser’s developer tools to navigate and interact with the DOM
  • Select and create DOM nodes with vanilla JavaScript

Introduction to the DOM

Look Ahead to Next Lesson

  • Create DOM event handlers using vanilla JavaScript.
  • Select DOM elements and properties using jQuery.
  • Manipulate the DOM by using jQuery selectors and functions.
  • Use event delegation to manage dynamic content.
  • Use implicit iteration to update elements of a jQuery selection.

Introduction to the DOM

Q&A

Introduction to the DOM

Exit Ticket

(Lesson #08)