DOM and JavaScript
Now days lot devloper directly starting web application in Angular or React. if your one of them this below notes will be helpfull and its will give what is DOM, Javascript, window, document and thier difference.
Window vs Document
This is my faviortie interview question while interviewing experience devloper. Beacuse now days who started their web devlopment with Angular or React mostly they wont interact with document or window or DOM.
so what is window and document 
In a broswer each tab is Window and inside window document will be loaded. so in simple terms A broswer Tab is window and Inside each window will have document.
Each window object has the majority of the properties like length, innerWidth, innerHeight, name.
Each window will have their own history and location like normal broswer tab.
you can access window object in the broswer console window. Press F12 in the broswer and type window in the console.
you will see all properites of window.
if you access window by using dot notation.
window.frames
window.history
window.screen
window.document
Document
The document object is your html, aspx, php, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc.
Document (DOM) is visable object in side window.
you can access Docuemnt in the window console by
window.document or document.
DocumentObjectModel(DOM)
The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content.
Why we need DocumentObjectModel(DOM)
before going learning about DOM first we need unsterand what is HTML.
What is HTML?
HTML is the standard markup language for creating Web pages. HTML is another computer program lanugage which used construct static webpages.
Sample :-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The above code is sample HTML code. you can save file with extention with *.html and if you open broswer its will display
Using HTML you can add Static text or Text box , dropdown box etc. But how to access to textbox or dropdown and perform operation with textboxs.
let understand indepeth with example.
Let asume that you need desing webpage with that will take two input number and result will be displayed in the another text box.
if you write this code in the HTML page
<html>
<body>
value1 = <input type="text" id="value1" name="value1" value="1"/>
value2 = <input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
Answer = <input type="text" id="answer" name="answer" value=""/>
</body>
</html>
This above HTML will generate textbox and submit button in the webpage. Now you can enter some number in the two text box but how can i access those two box value.
after user entering two value how to access these value and perform sum operation.
using HTML you can generate HTML filed like textbox or heading but you can't perform any math operation.
Here DOM will come to picture.
Document Object Model (DOM) is a programming interface for HTML documents.
so using DOM programing interface we can access HTML elements and get the value. for example to access above two textbox value we can write like this
document.getElementById("value1").value
document.getElementById("value2").value
Here we can access HTML element using ID but we can access using Name.
Using DOM we can add or remove HTML elements and their propreites. we can update style, width or height etc of html elemnts
example:-
- document.getElementById(id)
- document.getElementsByTagName(name)
- document.createElement(name).
so using DOM we can access HTML elements or Modify or create HTML elements so what is use of Javascript.
if you enter document.getElementById("value1").value command in web console widow you can see value value1 textbox entered value but how our goal is adding value1 and value2.
using DOM interface we can access element but you can't perform math operation. Here Javascript will come to picture.
JavaScript
Javascript is a lightweight interpreted or JIT-compiled programming language. if you want perofrm any math or any operations you can perform using Javascript.
document.getElementById("answer").value = document.getElementById("value1").value + document.getElementById("value2").value
Above code we can access value1,value2, answer textbox using DOM and adding value1 and value2 using javascript.
sum of two numbers example
<html>
<head>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1"/>
value2 = <input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
Answer = <input type="text" id="answer" name="answer" value=""/>
</body>
Links
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction