<<----: DOM IN JAVASCRIPT :---->>
1. Window Vs Document
2. DOM Vs BOM
3. DOM Navigation
4. Searching and getting Element Reference
🟠Window :-
🟢Window is the main container or we can say the global object and
any operation to entire browser window can be part of window obj.
🟢All the members like object,methods or properies. If they are the
part of window obj then we do not refer the window object.
🟢Window has methods,properties and object. ex. setTimeout() or setInterval()
are the methods, where as Documents is the object of the window and it also has
a screen object with properties describing the physical display
🟠Document :-
🟢Where the DOM is the child of window obj.
🟢Where in the DOM we need to refer the document,if we want to use the
document obj, method or properties.
🟢Document is just the object of the global object that is window, which deals
with the document,the HTML elements themselves.
DOM vs BOM :-
👉 The DOM is the Document Object Model, which deals with the document,
the HTML element themselves, eg. document and all traversal you
would do in it, events,etc.
For Ex:
change the background color to red
document.body.style.background = "red";
👉 The BOM is the Browser Object Model, which deals with browser components
aside from the document, like history, location, navigator and screen
(as well as some other that vary by browser) . OR
In simple meaning all the Window operation which comes under BOM are performed
Using BOM
Navigation Through the DOM :-
1: document.documentElement
return the Element that is the root element to the document.
2: document.head
3: document.body
4: document.body.childNodes (include tab,enter and whiteSpace)
list of the direct children only
5: document.children (without text nodes, only regular Elements)
6: document.childNodes.length
Searching and getting Element Reference :-
Interview Questions :-
Q. Difference Between getElementById And querySelectot?
🔹 What is getElementById()?
Syntax :-
elemet = document.getElementById(id);
returns a reference to the element by its ID.
If the element with the specific ID is not in the document,
it will return null.
🔹 What is querySelector()?
Syntax:
element = document.querySelector(selectors);
Return the first element with the document
that matchs the specified group of selectors,
or null if no matches found.
