The DOM Structure
DOM stands for Document Object Model. It is an application programming interface that treats an HTML file as a tree structure where each HTML element is a node (represented as an object). If you recall, HTML elements are like boxes. They can contain other elements. They also have a bunch of attributes. A DOM node object will contain information such as the text in the element, children of the element, and attributes of the element. By accessing the DOM using JavaScript, you can access the content of an HTML file, and change it as you like. Since the browser uses the DOM representation to render HTML content, changes made to the DOM will reflect immediately on the browser.
What is Application Programming Interface (API)? "In general terms, it is a set of clearly defined methods of communication between various software components." - Wikipedia API is a set of standards defined for a software where other programmers will use to communicate with it. It is analogous to the buttons on a microwave, users have to interact with the microwave using those buttons, and those buttons only. In the way they were designed for.
To demonstrate how a DOM looks like, lets create a simple HTML page. Since you should already have a solid understanding of HTML and CSS, we won't be explaining any HTML or CSS code in this course.
<!doctype html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>A heading</h1>
<a href="www.altcademy.com">Link text</a>
</body>
</html>
A very standard HTML file here. A title in the head element, an h1 and an anchor link in the body element. All inside the html element. All the information of the DOM is stored in the global variable document, which you can access using client side JavaScript. If you console.log(document) you should see something like this.
Try it out yourself by creating an HTML file locally with the above HTML code. The DOM is basically a programmable representation of the HTML file. The document variable contains the entire HTML content. To print the part that only contains the content inside the <html> tag, use the documentElement property of document. document contains a lot of properties, you can find the full list on MDN. We will only be needing a small selection of those for this course.