Cheat Sheet - DOM: What Is The DOM?
Cheat Sheet - DOM: What Is The DOM?
JavaScript can natively interact with the DOM to query it, manipulate it or
listen to events.
Window Object
The Window Object (remember: The global scope) represents a window
holding a DOM. In a tabbed browser, each tab counts as a window.
Your code by default runs in this scope and therefore you have access to
all the window methods, properties and events. This includes the DOM,
which represents your web page.
Location Object
The location object is a property of both the Document Object and the
Window Object (access it on the Window Object though). It represents the
current location of the page and therefore allows you to retrieve
information about host, URL etc.
Document Object
The Document Object (a property of the Window Object) represents the
actual webpage.
Through this object, you’re able to access the DOM via JavaScript. This
means, that you can traverse through the DOM, query it, listen to events
and so on.
You can think of this as a way to interact with your HTML code after it has
been loaded in the browser.
Of course this is how all those fancy live-updating webpages are created:
The DOM is manipulate through the Document Object.
System Dialogs
System Dialogs can also be controlled via JavaScript. Using them does not
provide the best user experience though, there are better ways to open
“popups” (modals) nowadays.
But still, the two important dialogs are alert() and confirm().
alert() simply offers a window which shows a messages and only offers an
“Ok” button.
confirm() also shows a message but allows the user to choose between
“Yes” and “No”. It will then return true or false, depending on the user’s
choice.