v5 Week 11: DOM API

Week	Topic	Learning Objectives	Key Resources
11	The DOM API	Students will be able to define the DOM and implement changes to parts of their portfolio project using DOM manipulation; use the DOM to handle form submission event on their portfolio project.	Week 11 Slides TBD

Overview

Document Object Model (DOM)

• Tree-like representation of webpage contents
• Nodes have parent-child and sibling relationships

Targeting Nodes with Selectors

• Use CSS-style selectors and relationship properties to target nodes
• Examples: div.display, .display, #container > .display, firstElementChild, lastElementChild

DOM Methods

• Query selectors: querySelector, querySelectorAll
• Element creation: createElement
• Appending elements: appendChild, insertBefore
• Removing elements: removeChild
• Altering elements: setAttribute, textContent, innerHTML, style, classList

Events

• Actions that occur on a webpage (e.g., clicks, key presses)
• Three ways to handle events:
  1. Inline onclick attribute in HTML
  2. onclick property in JavaScript
  3. addEventListener in JavaScript (preferred method)
• Event object: addEventListener callback function receives an event object with properties and methods
• Attaching listeners to groups of nodes: use a loop or forEach to iterate through a NodeList

Forms

Form Element

• Container for input elements
• Attributes: action (URL to send form data), method (HTTP request method)

Form Controls

• Input elements: <input> with various type attributes (e.g., text, email, password, number, date)
• Labels: <label> associates a text label with an input element
• Textarea: <textarea> multi-line text input
• Select dropdown: <select> with <option> elements
• Radio buttons: <input type="radio"> for mutually exclusive options
• Checkboxes: <input type="checkbox"> for multiple selections
• Buttons: <button> for submitting, resetting, or custom actions

Organizing Form Elements

• Fieldset: <fieldset> groups related inputs
• Legend: <legend> provides a caption for a fieldset

Styling Forms

• Default browser styles may differ
• Text-based controls are easy to style with CSS
• Radio buttons and checkboxes require more complex styling techniques
• Some elements (e.g., date pickers) are difficult or impossible to style directly

Guidance for Mentors

Potential trouble spots for students:

• Understanding the relationship between the DOM and the original HTML source code
• Navigating the DOM tree and selecting the correct nodes using selectors and relationship properties
• Knowing when to use innerHTML vs. textContent and understanding the security risks of innerHTML
• Recognizing the difference between a NodeList and an array and understanding how to iterate over a NodeList
• Grasping the concept of event bubbling and capturing
• Remembering to prevent default form submission behavior when handling form events with JavaScript
• Styling form controls consistently across different browsers
• Structuring and organizing complex forms with many input elements
• Understanding the difference between the value attribute and the checked property for radio buttons and checkboxes

Assignment Rubric

Lesson 13 Assignment Rubric

Repository Setup

• Merged previous lesson-12 pull request into main branch
• Created new lesson-13 branch from updated main branch

JavaScript File Setup

• Created a js folder at the same level as index.html, readme.md, and css folder
• Created an index.js file inside the js folder
• Linked the index.js file in the index.html file using a <script> element before the closing </body> tag

Footer Element

• Added a <footer> element to the index.html using DOM manipulation
• Placed the footer element correctly in the DOM tree

Copyright Text in Footer

• Created a variable named today and assigned it a new Date object
• Created a variable named thisYear and assigned it the current year using the getFullYear method
• Created a variable named footer and assigned it the footer element using DOM selection
• Created a variable named copyright and used it to create a new <p> element
• Set the inner HTML of the copyright element to display the student's name and the current year
• Appended the copyright element to the footer using DOM manipulation

Skills Section

• Added a new <section> element with an id attribute of "skills" above the "Connect" section in index.html
• Added a <h2> element inside the new section with the text "Skills"
• Added an empty unordered list (<ul>) element after the <h2> element

List of Skills

• Created an array named skills containing a list of technical skills
• Created a variable named skillsSection and used DOM selection to select the skills section by id
• Created a variable named skillsList and used DOM selection to query the skillsSection for the <ul> element
• Created a for loop to iterate over the skills array
• Inside the loop, created a variable named skill to create a new <li> element
• Set the inner text of the skill element to the current array element using bracket notation
• Appended the skill element to the skillsList element inside the loop

Git and GitHub

• Staged changes using git add
• Committed changes with a meaningful commit message using git commit
• Pushed changes to the GitHub repository using git push
• Created a pull request for the lesson-13 branch

Stretch Goal (Optional)

• Used Unicode to include the copyright symbol (©) in the footer content