Introduction to Web APIs and the DOM


Web APIs and the DOM

The course is part of this learning path

Introduction to Web APIs and the DOM

This practical course offers an introduction to Web APIs and the DOM.

Learning Objectives

In this course, you will learn about the following:

  • Window Object
  • Web APIs
  • The Document Object Model
  • The Parent, Child, and Sibling Elements
  • Node Objects

Intended Audience

This course is intended for anyone who wants to learn about Web APIs and the Document Object Model.


Anyone with an interest in Web APIs and the Document Object Model in general


Introduction to Web APIs, and The DOM. On the screen, I have the Chrome developer tools open with the console tab selected. I'm gonna begin by typing console log window, and I will hit enter. I have window displaying in the console, and I will click on the caret to expand it. This is the window object that represents the entirety of the browser. There are functions and other items listed here. I'm gonna focus on the alert function. Now in the console, I will type window.alert. Passing in alert is a web API, and I will hit enter.

In the browser alert window pops up on the screen. This leads to a question. What is a web API? Web APIs, sometimes refer to as browser APIs, are the functions and capabilities built into the browser. On the screen, I have the web API documentation for alert. Sometimes there is this misnomer that web APIs are JavaScript, or built into JavaScript. They are not. The request for a web API call originates from within the JavaScript environment, but the execution of the API call actually runs outside of it through the browser. And any language that can access a web API can make the call transitioning back to the console.

Now as part of the browser, there's the document, and I'm gonna console.log window.document and I'm gonna expand this result. And if you look to the left, Chrome is highlighting the empty webpage. And the results of the document shows an empty webpage. The document is the current webpage displayed on the browser window. One thing to note is that both commands were preceded with a window.. Window. is not required to execute these web APIs. I only use window. to emphasize that these commands were part of the window object. Typing alert or console logging document on its own is enough.

So we've taken a quick look at web APIs and the document. What is the Document Object Model also referred to as the DOM? On the screen, I have a DOM visualizer tool that contains some HTML boilerplate. The DOM is the standard that allows the document to be traversed through and manipulated while representing each element as an object. Hence the term object model. And each has various properties and methods that corresponds to the parents or behavior of that specific HTML element. The document is often represented as a logical tree, which is currently being presented on the right of the screen.

Taking a deeper look into the tree, HTML is the root element of the DOM. And there are two branches, the body and the head. Focusing on the body branch, the body can be referred to as the parent element for this branch and within the body is a child element, the DIV and the DIV has its own children. And each of these child elements within the DIV can be referred to as siblings. This also indicates that a body and head are also siblings as they are the children of the HTML element. And each one of these elements are considered to be nodes. And they're often referred to as a node object and a node object isn't just limited to the elements on the page. A node object can also be texts and attributes of elements on the page. And that's it. Thanks for watching at Cloud Academy.

About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics