JavaScript HTML DOM Documents

4 min readNov 15, 2022

JavaScript HTML DOM

The Document Object Model, or DOM for short, is a platform and programming interface for HTML (HyperText Markup Language) and XML (eXtensible Markup Language) documents. It provides a data representation comprising all the objects, depicting the structure and content of the document on the web. Every webpage has its own DOM that represents the page so that programs can alter its structure, look, and content.

In simpler terms, when a browser loads a webpage, it creates a model of that page. This model is the DOM tree and is filed in the browser’s memory. It provides functionality globally to the document, including how to obtain the page details and create new elements in the document. Remember, DOM is neither a part of HTML nor JavaScript; it’s a separate set of rules.

With the HTML DOM, you can use JavaScript to build HTML documents, navigate their hierarchical structure, and add, modify, or delete elements and attributes or their content, and so on. Almost anything found in an HTML document can be accessed, changed, deleted, or added using the JavaScript with the help of HTML DOM.

Finding HTML Elements

document.getElementById(id) // Find an element by element id
document.getElementsByTagName(name) // Find elements by tag name
document.getElementsByClassName(name) // Find elements by class name

Changing HTML Elements

element.innerHTML =  new html content // Change the inner HTML of an element
element.attribute = new value // Change the attribute value of an HTML element
element.style.property = new style // Change the style of an HTML element

Adding and Deleting Elements

document.createElement(element) // Create an HTML element
document.removeChild(element) // Remove an HTML element
document.appendChild(element) // Add an HTML element
document.replaceChild(new, old) // Replace an HTML element
document.write(text) // Write into the HTML output stream

Methods to Select an Individual Element Node

Following are the methods to select an individual element in the tree:

getElementById(‘id’): Uses the unique value of the element’s id attribute. The HTML must have an id attribute for the method to select it.

For example — getElementById(‘one’)

querySelector(‘css selector’): Uses a CSS selector, returns the first matching element.

For example — querySelector(‘h1’)

The code below combines these methods to add styling to the webpage.

JavaScript Code:

<script type="text/JavaScript">
document.getElementById('one').style.color="maroon"; //change font color
document.querySelector("h1").style.backgroundColor = "blue"; //change background color
</script>

Output:

Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

document.anchors // Returns all <a> elements that have a name attribute -  lv 1
document.applets // Deprecated - lv 1
document.baseURI // Returns the absolute base URI of the document -  lv 3
document.body  // Returns the <body> element - lv 1
document.cookie // Returns the document's cookie - lv 1
document.doctype // Returns the document's doctype - lv 3
document.documentElement // Returns the <html> element - lv 3
document.documentMode // Returns the mode used by the browser - lv 3
document.documentURI Returns the URI of the document 3
document.domain // Returns the domain name of the document server - lv 1
document.domConfig // Obsolete. - lv 3
document.embeds // Returns all <embed> elements - lv 3
document.forms // Returns all <form> elements - lv 1
document.head // Returns the <head> element  - lv 3
document.images // Returns all <img> elements - lv 1
document.implementation // Returns the DOM implementation - lv 3
document.inputEncoding // Returns the document's encoding (character set) - lv3
document.lastModified // Returns the date and time the document was updated lv3
document.links // Returns all <area> and <a> elements that have a href attribute 1
document.readyState // Returns the (loading) status of the document- lv 3
document.referrer // Returns the URI of the referrer (the linking document)-lv1
document.scripts // Returns all <script> elements - lv 3
document.strictErrorChecking // Returns if error checking is enforced - lv 3
document.title // Returns the <title> element - lv 1
document.URL // Returns the complete URL of the document - lv 1

Thank you for reading this article.

If you find this article useful please kindly share it with your network and feel free to use the comment section for questions, answers, and contributions.

You might also like :

Read Also : Laravel Tips and Tricks #2
Read Also : Laravel 9 Traits Example
Read Also : Laravel Eloquent Tips and Tricks
Read Also : Upgrade from Laravel 8 to 9