What is a DOM ATI Anyway?

INTRODUCTION
If you’re anything like me, just starting on your journey to learn JavaScript, you might be feeling a bit overwhelmed by the many technical terms and abbreviations. Let’s take a moment to slow down and flesh out some of these concepts so we can gain a better understanding of these seemingly intimidating phrases.

In this post, let’s focus on the DOM API. The DOM (Document Object Model) represents the content and structuring of the web page being created. This is useful for developers as it allows for different aspects of the document to be changed, such as its styling, formatting, and content. These changes are possible because of methods and properties inherent to the DOM API.

An API (Application Programming Interface) is the developer’s tool kit for making changes to a web page. This is done through JavaScript, or another programming language. Another term you’ll come across when learning about the DOM is node. Think of the DOM as a model of your web page, which is organized via a tree of logic. This tree of logic, which organizes your document, has branches. At the end of these branches are nodes. A node is simply an element of the DOM. If you are utilizing HTML, your nodes will be HTML elements. Here are some various examples of HTML nodes (HTML elements).

Source: https://w3schools.dev/js/js_htmldom_nodes.asp

Here is a visual representation of what a document’s logical tree can look like.

Source: https://www.w3schools.com/js/js_htmldom_methods.asp

API Methods
Now, let's look at some of these API methods and how they work. An API method, like any other Javascript method, performs an action. These actions are performed on the HTML elements that compose our document. To first access the API, you can utilize global objects as their gateway. A global object such as the document or window. As defined on the W3schools website, “The document object is the owner of all other objects in your web page.” To make any changes to the HTML elements you must first select them. This can be made easier by utilizing some DOM API methods! If you know the id of your desired element, you can locate it via this method:

You can even search through your HTML elements based on their CSS selector! A CSS selector is a pattern which is used to locate/select the HTML element or elements a developer wants to style.
Methods:

Note: Use the second method pictured above if you are trying to target ALL elements that match a certain CSS selector.

Another fundamental method developers will need to design functional web pages is adding Event Handlers. Event Handlers are the functions that run when a certain event occurs in the browser, such as a click or hovering the mouse over an element. If we want users to be able to click anything on our web pages, we need to track any input clicks. These clicks will result in a function executing, and depending on the function you can achieve different things. For example: in the event of a button click, an image can be displayed, a link can redirect the page, the page can display a message to the user, users can submit forms and more!

Source: https://www.w3schools.com/js/js_htmldom_methods.asp

API Properties
Lastly, let’s go over some Application Processing Interface Properties. So, we know that when we are making changes to our web page document it is done by manipulating its HTML elements. These HTML elements have properties. Some properties an element can have are its styles, attributes, and its content. If the developer wishes to change or add properties to an element, such as its content, there are ways to access said element’s content. If you are trying to access the HTML content of your element you can utilize the property:

If your desire is to access the element’s text content, you can utilize this property:

Source: https://www.w3schools.com/js/js_htmldom_methods.asp

Elements can also have attributes. Some of the most common-place attributes are id, title, class, src, href and style. You have most likely come across at least a few of these if you have ever worked with HTML elements. The attributes of HTML elements are included in the opening tag of the element and help provide additional info to format the element. In the HTML Attributes article on the GeeksforGeeeks website, they discuss the functionality of attributes, “HTML attributes are used to configure and adjust the element's behaviour, appearance, or functionality in a variety of ways. Each attribute has a name and a value, formatted as name=’value’.” Now let's look at some ways developers can access these attributes.