0% found this document useful (0 votes)
373 views3 pages

Cheat Sheet - DOM: What Is The DOM?

The DOM (Document Object Model) represents HTML elements and their properties in the browser, allowing JavaScript to interact with and manipulate the page. The Window and Document objects provide access to the DOM, so JavaScript code can query elements, listen to events, and change content dynamically. Key DOM interaction methods include getElementById(), getElementsByClassName(), querySelector(), and querying the location object to retrieve URL information.

Uploaded by

scribd account
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
373 views3 pages

Cheat Sheet - DOM: What Is The DOM?

The DOM (Document Object Model) represents HTML elements and their properties in the browser, allowing JavaScript to interact with and manipulate the page. The Window and Document objects provide access to the DOM, so JavaScript code can query elements, listen to events, and change content dynamically. Key DOM interaction methods include getElementById(), getElementsByClassName(), querySelector(), and querying the location object to retrieve URL information.

Uploaded by

scribd account
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Cheat Sheet – DOM

What is the DOM?


The DOM is the abbreviation for Document Object Model. Put in simple
words, it’s what your HTML code gets translated to in the browser. It holds
all your HTML elements and their properties.

JavaScript can natively interact with the DOM to query it, manipulate it or
listen to events.

If you want to dive deeper into it, here’s a great resource:


https://developer.mozilla.org/en-
US/docs/Web/API/Document_Object_Model/Introduction

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.

Learn more here: https://developer.mozilla.org/en-


US/docs/Web/API/Window

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.

Learn more here: https://www.google.de/webhp?sourceid=chrome-


instant&ion=1&espv=2&ie=UTF-8#q=js%20location%20object

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.

Learn more here:


https://developer.mozilla.org/en/docs/Web/API/Document

DOM/ HTML Interaction


There are tons of ways to interact with the DOM via JavaScript.
Often times you’ll need to select certain Nodes (“HTML Elements”) and
traverse through the DOM or set/ get some properties.

You’ll find an extensive list of available methods and properties in this


article: https://developer.mozilla.org/en/docs/Web/API/Document

Basically you may select Nodes either as properties of the Document


Object like this:
var anElement = window.document.children[1] // select 2nd child
element
Or you use a method to search for certain elements. For example for
elements with a class name:
var important = document.getElementsByClassName('important');
Similar methods exist for finding by ID, Tag Name etc.

A very convenient way of querying, is to use the query methods:


console.log(document.querySelector('.class)); // first element
console.log(document.querySelectorAll('.class')); // all elements

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.

You might also like