Merge pull request #18 from SuryaKarmakar/IBM-JavaScript-Essentials

Ibm java script essentials

Author: sury4karmakar

Courses/IBM-JavaScript-Essentials/README.md

@@ -1378,3 +1378,47 @@ try {
 // the message program continues after error handling is logged.
 console.log("hello world");
 ```
+
+## Document Object Model (DOM):
+
+The document object model, or DOM, is a programming interface for web documents. It represents the web page so that programs like JavaScript can change the document structure, content, and style. It provides a structured representation of the web page, making it easier for developers to interact with and manipulate web content.
+
+- Document:
+
+1. The term document refers to a web page or any XML document such as HTML, XHTML, or XML.
+2. The DOM represents this document as a structured tree-like hierarchy with each part represented as a node.
+
+- Object:
+
+1. An object represents a JavaScript object that corresponds to an element, attribute, or content within the web document.
+2. Each DOM element is an element of the web page, accessible and manipulable using JavaScript.
+
+- Model:
+
+1. The model denotes the structured and abstract representation of a web document.
+
+- How the DOM works ?
+
+When a web page is loaded in a browser, the browser creates a DOM representation of the page's structure. It forms a hierarchical tree structure with the document's root as the top node.
+
+- $0 variable:
+
+$0 is a special variable that you can use in the browser's development console as a quick reference to the currently selected DOM element in the elements panel in web development.
+
+Open console tab within developer tools and type $0 in the console. For example, if you have selected a div element in the elements panel and you type $0 in the console, it will refer to that div element. Once you have the element referenced with $0, you can interact with it using JavaScript. This includes accessing its properties or modifying its attributes.
+
+- Types of node:
+
+1. Document node is the top level node representing the entire web page. The entire HTML document is represented as the document node. To access the entire document using the document object, open console and type
+
+```js
+var documentNode = document; // Now the entire document is accessible through the documentNode variable.
+
+documentNode; // You will be able to see the entire document object.
+```
+
+2. Element nodes represent HTML elements such as div, p, a, and form the bulk of the DOM structure. To access the element node select the paragraph you want to inspect and select inspect. then navigate to the console tab and enter $0. It will output the HTML code and details of that specific element.
+
+3. Attribute nodes represent attributes of HTML elements including id, class, and src.
+
+4. Text nodes contain the text content within elements. To retrieve the text of the selected element, use the $0.textContent command. This will give the text content.