HTML Document Object Model (DOM)
The HTML Document Object Model (in short, HTML DOM) represents all the elements of an HTML document in a hierarchical order (or tree structure). Where each node of this tree represents an element in the HTML document.
Accessing and Modifying HTML DOM
Using the HTML DOM methods we can access the tree and modify the structure or, contents of the respective HTML document. We can also have events attached to the nodes.
HTML DOM Tree Structure
For instance, if your HTML document contains elements like <html>, <head>, <body>, <title>, <link>, <img> and <p>, the browser will create a DOM Tree of the HTML document that can be represented as shown in the diagram given below −
Please note that each HTML document contain <html>, <head> and <body> tags. The root element is <html>, and <head> and <body> tags are its child element.
What is Document Object Model?
The Document Object Model (DOM) is a programming interface that works as a bridge between web pages and scripts or programming languages. It represents a web document (like an HTML or XML) as a tree of objects where each branch of the tree ends with a node, and each node contains objects.
Click on the button given below to understand it properly. It will generate a DOM Tree.Create DOM Tree
The DOM provides a set of methods that allow programming languages, such as JavaScript, to access the DOM tree. Using these methods, you can change the document’s structure, style, or content. It makes a web page interactive and dynamic.
The DOM is not a programming language, it is designed to be language independent. Most web developers use the DOM through JavaScript, however, implementations of the DOM can be built for any language.
HTML DOM vs JavaScript DOM
We use HTML to structure a web page and JavaScript to make it interactive. However, JavaScript can not understand the a web page directly. It takes help of the HTML DOM. When an HTML page is loaded, the browser creates an Object Model of the page, which JavaScript can then interact with to manipulate the content, structure, and styles of the page.
JavaScript can perform the below operations with the help of object model −
- Access and replace HTML elements.
- Access and replace HTML attributes.
- Change all the CSS styles in the page.
- Respond to user events.
- Add animation to the web page.
The below table explains the difference between HTML DOM and JavaScript DOM −
| HTML DOM | JavaScript DOM |
|---|---|
| The HTML DOM is an Object Model for HTML that represents all elements of an HTML document in a tree like structure. | The HTML DOM is an API for JavaScript that helps add, change, and replace elements, attributes and events of an HTML document. |
DOM Methods Reference
Below is a list of important DOM methods −
| Sr.No | Method & Description |
|---|---|
| 1. | toString()It is used to convert an HTML element into a string format. |
| 2. | setAttribute()This method allows you to define attributes for a particular element. |
| 3. | setAttributeNode()This method allows you to define a particular attribute node on a particular element. |
| 4. | scrollIntoView()It ensures that a particular element on a web page of scrollable container becomes visible by adjusting the scroll position. |
| 5. | querySelector()It is used to select and access the first HTML element that matches a given CSS selector(s) within the document. |
| 6. | querySelectorAll()This method allows you to select and access all HTML element that matches a given CSS selector(s) within the document. |
| 7. | remove()This method can delete an element completely from the web page. |
| 8. | removeAttribute()This method is used to delete any attribute that has been set on an HTML element within the DOM structure. |
| 9. | removeAttributeNode()It allows you to delete a specific attribute node from an element. |
| 10. | removeChild()It is used to delete the selected child element from its parent element. |
| 11. | removeEventListener()This method allows you to delete an event listener that was previously assigned to an element. |
| 12. | replaceChild()This method enable us to replace one child element with another in a parent element. |
| 13. | hasAttribute()It is used to check whether an attribute exists within an HTML element. |
| 14. | hasAttributes()This method checks whether an element in HTML DOM has attributes. |
| 15. | hasChildNodes()It is used to check if an HTML element has any child element inside it. |
Click here to view list of all methods….
DOM Properties Reference
Below is a list of important DOM properties −
| Sr.No | Method & Description |
|---|---|
| 1. | titleIt helps us to access and update the value stored in an element’s title attribute. |
| 2. | textContentThis property is used to access and update the text content of an HTML element and all its child elements as a single string. |
| 3. | tagNameIt gives you the name of the HTML tag in uppercase that defines an element on a webpage. |
| 4. | styleUsing this property, you can get the CSS styles that are directly set for a particular element. |
| 5. | tabIndexIt is used to access and update the value of the tabIndex attribute for an element. |
| 6. | scrollLeftThis property is used to access and update how far an element’s content is scrolled horizontally. |
| 7. | scrollTopIt is used to access and update how far an element’s content is scrolled vertically. |
| 8. | scrollWidthThis property gives you the total horizontal width of an element’s content in pixels. |
| 9. | scrollHeightYou can get the total vertical height of an element’s content in pixels using this property. |
| 10. | idThe id property is used for setting and retrieving the value of the element’s id attribute. |
| 11. | innerTextIt allows us to retrieve or change the visible text content directly within an HTML element on a web page. |
| 12. | isContentEditableIt is used to check if a webpage element can be edited by users directly. |
| 13. | langThe lang property is an attribute of an HTML element that specifies the language code. |
| 14. | lastChildThe lastChild property returns a node that points to the last child node of a specific parent element. |
| 15. | lastElementChildIt returns a node that holds the last child element of a parent element. |
Click here to view list of all methods….
Frequently Asked Questions about DOM
There are several Frequently Asked Questions(FAQ) about DOM, this section tries to answer some of them briefly.What is the full form of DOM?
Why DOM is used in JavaScript?
Is DOM a programming language?
What are DOM interfaces?
Leave a Reply