Professional JavaScript

Chapter 1

JavaScript, HTML, and the DOM

Learning Objectives

By the end of this chapter, you will be able to:

• Describe the HTML Document Object Model (DOM)
• Use the Chrome DevTools source tab to explore the DOM of a web page
• Implement JavaScript to query and manipulate the DOM
• Build custom components using Shadow DOM

In this chapter, we will learn about the DOM and how to interact with and manipulate it using JavaScript. We will also learn how to build dynamic applications using reusable custom components.

Introduction

HTML started as a markup language for static documents that was easy to use and could be written using any text editor. After JavaScript became a major player in the internet world, there was a need to expose the HTML documents ...