Object-Oriented JavaScript — Timers and the DOM

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the built-in properties of window and the DOM.

The window.setTimeout() and window.setInterval() Methods

We can use the window.setTimeout and window.setInterval methods to schedule the execution of some JavaScript code.

setTimeout lets us run some code after a delay.

For instance, we can write:

function foo() {  
  alert('foo');  
}  
setTimeout(foo, 2000);

It returns the ID of the timer.

We can use the ID to call clearTimeout to cancel the timer.

For example, we can write:

function foo() {  
  alert('foo');  
}  
const id = setTimeout(foo, 2000);  
clearTimeout(id);

then the alert will never be shown because clearTimeout before the 2 seconds are up.

We can use the setInterval method to schedule foo to run every 2 seconds.

For instance, we can write:

function foo() {  
  console.log('foo');  
}  
const id = setInterval(foo, 2000);

We can call clearInterval to cancel the timer by writing:

clearInterval(id);

Scheduling a function in some amount of milliseconds isn’t a guarantee that it’ll execute exactly at that time.

Most browsers don’t have millisecond resolution time.

Also, the browser maintains a queue of what we expect them to do.

100ms means adding to the queue after 100 ms.

But the queue may be delayed by something slow.

Most recent browsers have the requestAnimationFrame function which is better than timeout functions because we ask the browser to run or function whenever it has the resources.

The schedule isn’t defined in milliseconds.

For instance, we can write:

function animateDate() {  
  requestAnimationFrame(() => {  
    console.log(new Date());  
    animateDate();  
  });  
}  
animateDate();

to log the latest date whenever the browser can run the code.

The window.document Property

The window.document property is a BOM object that refers to the currently loaded document or page.

DOM

The DOM represents an XML or an HTML document as a tree of nodes.

We can use DOM methods and properties to access any element on the page.

Also, we can use them to modify or remove elements.

It’s a language-independent API that can be implemented in any language.

We can view the DOM tree within the Elements tab of the browser.

For example, we should see that a p element is created by the HTMLParagraphElement constructor.

And the head tag is created by the HTMLHeadElement constructor.

Core DOM and HTML DOM

The core DOM forms the most basic parts of the DOM specification.

And the HTML DOM specification builds on top of the core DOM.

The following constructors are in the core DOM:

• Node — any node on the tree
• Document — the document object
• Element — tags in the tree
• CharacterData — constructor for dealing with texts
• Text — text node in a tag
• Comment — a comment in the document
• Attr — an attribute of a tag
• NodeList — list of nodes, which is an array-like object with a length property
• NamedNodeMap — same as NodeList but the nodes can be accessed by name rather than numeric index.

The HTML DOM has the following constructors:

• HTMLDocument — an HTML specific version of the document object
• HTMLElement — parent constructor of all HTML elements
• HTMLBodyElement — element representing the body tag
• HTMLLinkElement — an a element
• HTMLCollection — a NamedNodeMap that’s specific to HTML

We can use them to access DOM nodes, and modify, create, and remove nodes.

Conclusion

An HTML document is represented by the DOM.

We can get and manipulate the nodes in the DOM tree to do what we want.

window has timer methods to let us schedule code to run.