It is now inevitable for all businesses to go online and have a website, especially with the outbreak of the Corona virus, having a website has become widespread. The job market has also heated it up. Knowing JavaScript and its concepts will help you become a professional coder, website designer, and web developer.
So stay with the article “Getting to know BOM and DOM in JavaScript” which is part of the series of JavaScript articles until the end.
Table of Contents
What is DOM?
DOM stands for Document Object Model. This is a standard defined by the W3C (World Wide Web Consortium). DOM is a programming interface (API) for displaying and interacting with HTML, XHTML and XML documents. It organizes document elements in a tree structure (DOM tree), and in the DOM tree, all document elements are defined as objects (tree nodes) that have properties and methods.
DOM tree objects can be accessed and manipulated using any programming language, as it is cross-platform and language-independent. Normally, we manipulate the DOM tree with the help of JavaScript and jQuery.
DOM API Objects
Window
A window object represents an open window containing a DOM document.
Document
The document object displays the HTML document in a specific window.
History
This object contains information about the URLs visited by the client.
Location
This object contains information about the current URL.
Navigator
This object contains information about the client.
DOM API Methods
DOM methods are actions you can take on document elements.
appendChild
This method adds an element to the object as a child.
createElement
This method creates an instance of the element for the specified tag.
Reload
This method reloads the current document.
removeNode
This method removes the object from the document hierarchy.
DOM API Properties
HTML DOM properties are values (of document elements) that you can set or change.
appName
This property retrieves the name of the client.
appVersion
This feature retrieves the app’s platform and version.
href
This property sets or retrieves the entire URL as a string.
HTML DOM
When a web page is loaded, the browser creates a DOM tree for all the objects (Html elements) of that page. The HTML DOM is a completely object-oriented representation of your web page, and in the HTML DOM everything is a node. DOM tree nodes can be removed, added and replaced using the DOM API.
Types of HTML DOM tree nodes
Document Node – document node
This node represents the HTML document.
Element Node – element node
This node represents an HTML element.
Attribute Node – attribute node
This node represents the attribute of an HTML element.
Text Node – text node
This node represents the text inside an HTML element.
Comment Node
This node represents HTML comments.
What is a BOM?
BOM stands for Browser Object Model. Unlike the DOM, there is no defined standard for the BOM, so different browsers implement it in different ways. Typically, the collection of browser objects is collectively referred to as the browser object model.
The main task of BOM is to manage browser windows and enable communication between windows. Each HTML page that is loaded in the browser window becomes a document object, and the document object is an object in the BOM. You can say BOM is a superset of DOM. The BOM contains many objects, methods, and properties that are not part of the DOM structure.
Important BOM objects
- Document – document
- location
- history
- Navigator
- Screen – screen
- Frames