What is a web page?
We've all used web pages. You're viewing one now! But what is a web page, really? In order to modify one, we'll need to know what we're working with...
So let's see... A web page has a surface to it - the interface that we see as the user. But of course there's the sourcecode behind that surface, too. So which is the web page?
Well... both!
A web page is a document. It's a document that can be displayed either in a browser window or as the source code.
In order to modify this document, we use an object-oriented representation of it called the Document Object Model, or DOM.
What is the DOM?
The DOM is an interface for HTML documents. Basically, the DOM is a representation of a document which we can use to manipulate the document's structure, styles, and content using JavaScript.
The DOM has a tree-like structure: starting with the root element (the <html> tag), each child element branches out. Typically, the root element is a parent to two child elements: <head> and <body> . The <body> tag is then parent to any elements within it — paragraphs, links, buttons, forms etc. Those child elements can then have children of their own: a form will have labels and inputs, an article can have a heading, text content, links, etc.
Why does this matter?
We use this structure to traverse the DOM; we use it to add, modify, and remove elements from the page after it has finished loading. For example, this allows us to:
react to user input — we can modify a page's content according to information entered by a user, and even send that information to a server for further manipulation.
use data received from servers — we can reach out to powerful APIs (Application Programming Interfaces) and use the information received to revise a page's contents.
Throughout this part of the course, you will learn how to:
gain access to specific elements in the DOM;
modify the contents and styles of those elements, and even remove them if necessary;
create new elements and add them to the DOM;
react to DOM events — user clicks, form navigation, and more.
OK, let's get to it!
