The representation of an HTML document inside a web browser is treated as an HTML DOM tree. It is a series of objects and defines the structure of a web page.
What is Document Object Model(DOM)?
This section will demonstrate the various levels of DOM. First, there is a window object in a browser that is always on top, and then there is a document node. Let’s have a look at the image below:
Well, you can see the DOM elements in the picture above. Window and Document are the top-level browser objects and then we have the HTML element as the root. Moving on, we have the Head and Body nodes, Title node belongs to the Head node and the Body node contains all the nodes that are rendered and visible in the web browser. Moreover, body elements contain attributes we can see in the image such as anchor tag containing “href” attribute. Similarly, other DOM nodes contain various attributes such as img, meta, and more.
What are DOM properties and how to access them?
You can find the following DOM properties:
innerHTML: This property is used to set or fetch the HTML content of a DOM node.
let htmlContent = document.getElementById("customID").innerHTML;
innerText: Use this DOM property to access or set the textual content of an HTML element.
let textualContent = document.getElementById("customID").innerText;
parentElement: You may use this property to access the parent node of the element.
let parentNode = document.getElementById("customID").parentElement.nodeName;
style: Update the style attribute of an element.
let styleAttr = document.getElementById("customID").style.color = "red";
title: Use this property to update the title element of DOM.
document.getElementById("customID").title= "this is a web page";
addEventListener(): This DOM method is used to attach an event handler to an element.
getAttribute(): This DOM method is used to attach an event handler to an element.
getElementById(): Method to get a specific element with the given “id”.
let element = document.getElementById("myID");
querySelector(): Use this method to get the first child element that is being matched with a CSS selector.
document.getElementById("myID").querySelector(".first").innerHTML = "change the value";
toString(): You can use this method to convert an element into a string.
Likewise, there are many other methods and properties that you can explore.
Connect with us
Ask a Question
You can let us know about your questions or queries on our forum.
You can visit this link to get a detailed answer to this question.
- What is Serverless Computing? | Serverless Architecture
- What is Multitenancy? | Why a Multi-Tenant Approach?
- What is Generative AI | Generative Artificial Intelligence
- How to use ChatGPT in VSCode | The VSCode Extension Code GPT
- What is OpenAI Chatbot GPT-3 | ChatGPT an AI Revolution
- An Introduction to Artificial Intelligence | What is AI?