DOM Document Object Model in JS

The DOM stands for Document Object Model. The DOM provides a way of manipulating HTML and XML documents. We call this “way of manipulating” things an Application Programming Interface, or API. The DOM provides a structural representation of the document in tree form, enabling you to modify its content and visual presentation by using a scripting language

Source: https://engineering.semantics3.com/web-scraping-in-perl-using-mojo-dom-a453229c732f

The highest level of the DOM tree is the window object. Think of the window as the browser window. The window contains the entire DOM document. All HTML components are accessible from the DOM.

Window Commands

.window.document;
//returns the entire HTML document

.window.innerWidth;
 // returns the inner width of the browser window

.window.innerHeight;
// returns the inner height of the browser window

Adding / Removing / Changing HTML attributes

getElementById

The document.getElementById() method provides the quickest access to a node. However, it requires knowledge of the node id, which is very specific, unique and only used once. Since IDs must be unique, this method only returns one element.

document.getElementById(‘query’)
// returns the element whose id matches the specified string

getElementsByClassName

Unlike the id, the class name does not need to be unique. The document.getElementsByClassNamereturns an HTMLCollection (a list of DOM nodes ). This HTMLCollection is not an array, even though it has a length property of all elements with the given class.

document.getElementsByClassName('topbar_inner');
// returns an object of all child elements with the given class name

getElementsByTagName

The tag name is the main thing between the <> (e.g., ‘div’, ‘span’, ‘h1’, ‘p’). The document.getElementsByTagName() returns a HTMLCollection of elements with the given tag name.

document.getElementsByTagName('div');
// returns a HTMLCollection of elements with the given tag name

Additional Resources

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

https://www.digitalocean.com/community/tutorials/introduction-to-the-dom

https://eloquentjavascript.net/14_dom.html

https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/