Greeting Everyone! Hope everything Is Going Good Today we Are Going to look On what is Javascript DOM , How DOM Work In Your Project Let’s discuss.
What is DOM ?
Dom is abbreviation for Document Object Model. But Keep In Mind we can say It id Browser Constructor Which Actually access By javascript. DOM We can define as is relationships and attributes of the HTML document that was received In Our Front end .
Remember that a JavaScript object is a tree structure that has properties and values. So it can be accessed using a special object provided by the browser as Eg document Module.
To Check Open You Browser And Navigate To Console Which Allow Us to interact With js As look On Below Picture:
As above pic we see document Object we provide By browser which represent the HTML Document . This Object Is not Provided by javascript Which consist On Browser Constructor
DOM is Based on by the W3C For More .
There is number Of advantage why we need to use DOM:
- Core Specification
- Events Specification
- Style Specification
- Validation Specification
- Load and Save Specification
How DOM Work?
Whenever We Browsing A Website No matter What backend They are using bur As It manipulate us HTML stream that an user can really Interact With Browser & Site We serve. Then As html element Which Converted to Token As We Can Say (DOCTYPE , Statrt Tag, End tag, Comment), Then Token Are converted To nodes And After That Nodes are Converted To DOM Which We can access As JS Because it is globally Accessable By javascript.
Some Specification What Can We Do using DOM With Web page?
getElementById Which is Define By js method on document returns a HTML element based on node specified by id attribute. We used almost every time that we want to manipulate info from, an element on our document. As Eg:
document.getElementById(‘yourdata’);
As We are Going to manipulate title element we will define document.getElementById(‘Title’); As We See This is the way How we Can define getElementById By web console.
Selecting Multiple Element At once
As here we are Going to define multiple element at once as we are accessing element Bytheir Class or by their tag attributes So here Accessing element By class we dfine As,
Document.getElementsByClassName():
As here We need to define Class attribute name which we need to manipulate Through Console
.getElementsByClassName(‘Yourclass’):
As here getElementsByClassName method of document interface returns an array-like object of all child element which have all of given class name() as we define. To access Element By Their Tag As above model we define ocument.getElementsByClassName(): .
To Define Tag We simply Use document.getElementsByTagName('your tag'); in console to manipulate element as getElementsByTagName() methos returns a collection of all element in the document with the specified tag name as we define.
Here Below List Of common APIs in web and xml page Scripting Using The DOM.
document.getElementById(id)document.getElementsByTagName(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()window.contentwindow.onloadwindow.scrollTo()
Conclusion: As Today We Discussed how DOM Work Inside Javascript As Which Constructor For Browser How we can use Different element to interact with web console for more documentation About DOM Visit https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction In next blog we will see common security threads In DOM How DOM Vulnerable
For exploit!
Stay Tuned Byeee!
