Course syllabus

Module 1: Getting Started with JavaScript

3 lessons

Module 2: Language Fundamentals

5 lessons

Module 3: Conditions and Loops

4 lessons

Module 4: Functions, Scope, and Closures

6 lessons

Module 5: Arrays, Objects, and Collections

6 lessons

Module 6: Modern JavaScript, OOP, and Data

6 lessons

Module 7: DOM and Browser APIs

5 lessons

Module 8: Asynchronous JavaScript

5 lessons

Module 9: Tooling, Testing, Debugging, and Security

5 lessons

Module 10: Projects and Guided Practice

2 lessons

Module 11: JavaScript Interview Questions and Answers

5 lessons

JavaScript Tutorial

Module 7: DOM and Browser APIs

The DOM and Selecting Elements

Understand the document tree and select nodes to read or update a page.

8 minute lessonBeginner to intermediate

The Document Object Model (DOM) represents an HTML document as a tree of nodes. Browser JavaScript can select elements, read their content, update attributes, attach event listeners, and create or remove nodes.

HTML

<h1 id="page-title">Welcome</h1>
<p class="status">Ready</p>

JavaScript

const title = document.querySelector("#page-title");
const status = document.querySelector(".status");
console.log(title?.textContent);
console.log(status?.textContent);

querySelector returns the first match or null; querySelectorAll returns a static NodeList of all matches. Check that an element exists before using it if the script may run on pages where the selector is absent.

Script timing#

Use a script with defer, a module script, or run code after the relevant DOM has been parsed. Otherwise, a query can return null simply because the HTML element has not been created yet.

Content and attributes#

Use textContent for plain text. Use getAttribute/setAttribute for attributes, and use properties such as input.value when working with form controls. Avoid using innerHTML for untrusted strings.

Practice#

Create a small HTML page with a heading and a paragraph. Select both from JavaScript and log their text. Then handle the case where the heading is missing.

Loading lesson...

JavaScript Tutorial

Module 7: DOM and Browser APIs

The DOM and Selecting Elements

Understand the document tree and select nodes to read or update a page.

8 minute lessonBeginner to intermediate

HTML

<h1 id="page-title">Welcome</h1>
<p class="status">Ready</p>

JavaScript

const title = document.querySelector("#page-title");
const status = document.querySelector(".status");
console.log(title?.textContent);
console.log(status?.textContent);

Script timing#

Use a script with defer, a module script, or run code after the relevant DOM has been parsed. Otherwise, a query can return null simply because the HTML element has not been created yet.

Content and attributes#

Practice#

Create a small HTML page with a heading and a paragraph. Select both from JavaScript and log their text. Then handle the case where the heading is missing.