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.