-
JS Setting Up Environment
-
JS Syntax
-
JS Comments
-
JS Generating OutPut
-
JS Variables
-
JS Data Types
-
JS String
-
JS String Methods & Properties
-
JS Template Literals
-
JS Operators
-
JS Conditional Statements
-
JS Break and Continue
-
JS Functions
-
JS DOM
-
JS DOM Methods and Elements
-
JS DOM HTML/CSS Manipulation
-
JS DOM Navigation & Nodes
-
JS Events
-
JS Array
-
JS Loops
-
JS Object
-
JS Accessors
-
JS Object Constructors
-
JS Prototype & Iterables
-
JS Date & Time Function
-
JS Math Function
-
JS Storage
-
JS Classes
-
JS Map & Set
-
JS Global Scope
-
JS Rest and Spread
-
JS Error Handling
-
JS Asynchronous
-
JS Promise
-
JS Async/Await
-
JS Node.js
-
JS Regular Expression
-
JS Fetch API
-
JS BOM
-
JS Form Validation
-
JS Practiced Example
-
JS Projects
JavaScript DOM
DOM stands for Document Object Model. It is an application programming interface that allows us to create, add, modify and remove elements from the document.
Every page you see in a browser window can be considered as an object. A Document object represents the HTML document that is displayed in that browser window.
The way a document’s content is accessed and modified is called the DOM (Document Object Model).
Importance of the DOM:
Manipulating web page content: Using the DOM, JavaScript can dynamically change the content and appearance of web pages in response to user actions or other events.
Responding to user events: The DOM provides a way for JavaScript to listen for user events, such as mouse clicks, key presses, or form submissions.
Accessing and modifying form data: When users submit web forms, JavaScript can use the DOM to access and modify the data entered by the user.
Standard Programming Interface: DOM provide a standard programming interface that can be used in various environments and applications
DOM Tree:
The DOM represents the structure of a document as a tree, where each node in the tree corresponds to an object. The top node is the document node, representing the entire document. The branches of the tree contain nodes for HTML elements, attributes, and text, forming a hierarchical structure.
The relationship between HTML, CSS, and JavaScript
Here’s a brief overview of how they work together:
Dom Document - document.write():
The document.write() method is a built-in method in JavaScript that allows you to write dynamic content to an HTML document. When called, it adds new HTML content to the page. The content can include text, HTML tags, and JavaScript code.
For example, you can use document.write() to add a heading to a page:
When this code is executed, it will write “Hello, World!” to the page in an h1 heading element. Note that you must include the script tag in the body of the HTML document for document.write() to work.
