{"id":63758,"date":"2019-08-09T17:48:30","date_gmt":"2019-08-09T12:18:30","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=63758"},"modified":"2021-02-17T21:32:15","modified_gmt":"2021-02-17T16:02:15","slug":"javascript-dom","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-dom\/","title":{"rendered":"JavaScript DOM (Document Object Model) &#8211; Guide for Novice Learners"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1453,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/CSS_code&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250811231854\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/CSS_code&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:24:56&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-14 12:31:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-20 08:18:33&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-29 14:06:27&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-06 18:08:11&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-13 10:46:15&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-16 16:13:56&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-26 02:00:21&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-30 18:11:46&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-04 11:32:04&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-13 13:14:50&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-25 19:04:09&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-03 20:27:55&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-03-11 00:51:40&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-15 17:03:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-21 06:16:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-29 21:34:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-05 21:01:03&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-10 08:26:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-20 05:34:34&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-24 13:59:36&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-04-30 16:10:28&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-05-04 16:08:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-08 09:30:53&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-11 11:13:10&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-03 08:23:50&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-03 08:23:50&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>The most common thing you\u2019ll need, as a web developer, is a means to manipulate the document structure in some way without much hassle. For this purpose, we use the Document Object Model (DOM),<em> a set of APIs for controlling HTML and styling information that use the Document object<\/em>. This JavaScript tutorial will discuss DOM in detail and walk you through the different methods of using them. We will learn about the different terminologies associated with the DOM and how to work with them.<\/p>\n<p>The <strong>Document<\/strong> interface, mentioned above, represents any web page loaded in the browser. It serves as an entry point into the web page&#8217;s content, which is the DOM tree. It also describes the common properties and methods for any kind of document.<\/p>\n<p><em><strong>Before starting, we would suggest you to complete the\u00a0<a href=\"https:\/\/data-flair.training\/blogs\/javascript-class\/\">JavaScript Class Tutorial<\/a><\/strong><\/em><\/p>\n<h2>JavaScript Document Object Model (DOM)<\/h2>\n<p>A <strong>Document Object Model<\/strong> is a programming interface for <strong>HTML<\/strong> <em>(HyperText Markup Language)<\/em> and <strong>XML<\/strong> <em>(eXtensible Markup Language)<\/em> documents. It provides a data representation comprising all the objects, depicting the structure and content of the document on the web. Every webpage has its own DOM that represents the page so that programs can alter its structure, look, and content.<\/p>\n<p>In simpler terms, when a browser loads a webpage, it creates a model of that page. This model is the DOM tree and is filed in the browser\u2019s memory. It provides functionality globally to the document, including how to obtain the page details and create new elements in the document. Remember, <strong>DOM is neither a part of HTML nor JavaScript; it\u2019s a separate set of rules.<\/strong> All the major browser makers implement it and it covers two primary sections:<\/p>\n<ul>\n<li>Creation of the DOM tree<\/li>\n<li>Manipulation of the DOM tree<\/li>\n<\/ul>\n<p>We will cover both these areas in this tutorial so you will understand how JavaScript actually works with the DOM. For now, let\u2019s see what a DOM tree looks like and its different components with the help of a program.<\/p>\n<p><strong>Program:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;DOM Model&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1&gt;DataFlair\u2019s Tutorial&lt;\/h1&gt;\r\n    &lt;p&gt;DOM Tree&lt;\/p&gt;\r\n    &lt;p id = \"text\"&gt;This is a text element in the DOM tree.&lt;\/p&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p><strong>Screenshot:<\/strong><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65519 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom.jpg\" alt=\"dom\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>The diagram below depicts the DOM tree of the document.<\/p>\n<h3>JavaScript DOM Tree<\/h3>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66218\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree.png\" alt=\"JavaScript Dom Tree\" width=\"817\" height=\"573\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree.png 817w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree-150x105.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree-300x210.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree-768x539.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Dom-Tree-520x365.png 520w\" sizes=\"auto, (max-width: 817px) 100vw, 817px\" \/><\/a><\/p>\n<p>Every element, attribute, and text content in the HTML creates its own<strong> DOM node<\/strong> in the tree. A DOM tree consists of four main types of nodes:<\/p>\n<ul>\n<li>\n<h4>Document node:<\/h4>\n<\/li>\n<\/ul>\n<p>This is added at the top of the tree and represents the entire page in the browser. As stated above, it is the starting point in the DOM tree; you need to navigate via the document node to access any other node in your DOM tree.<\/p>\n<ul>\n<li>\n<h4>Element nodes:<\/h4>\n<\/li>\n<\/ul>\n<p>All the HTML elements like heading tags (&lt;h1&gt; to &lt;h6&gt;) and paragraph tags (&lt;p&gt;) in the page create an element node in the tree. You use these nodes to gain access to the elements\u2019 attribute and text nodes.<\/p>\n<ul>\n<li>\n<h4>Attribute nodes:<\/h4>\n<\/li>\n<\/ul>\n<p>When the opening tags in the HTML document contain attributes, the tree represents them as attribute nodes. These are not the children of the element nodes but a part of them.<\/p>\n<ul>\n<li>\n<h4>Text nodes:<\/h4>\n<\/li>\n<\/ul>\n<p>Once you have access to the element node, you can reach the text content within that element, stored inside the text nodes of the DOM tree. These nodes cannot have child nodes. Thus, a text node always creates a new branch in the DOM tree, and no further branches come out of it.<\/p>\n<p>Want to see it in action? Open your Browser Elements Tab <strong>(Ctrl + Shift + I)<\/strong>. In the previous DataFlair&#8217;s tutorial of JavaScript Classes, we used this shortcut to use the Browser Console. Explore all the tabs that this shortcut provides and the changes you notice when you adjust the code a bit. If you want to become a good web developer, you will need these tabs a lot while developing.<\/p>\n<p>Let\u2019s see how our code above turned out into the browser window and how the DOM tree helps us in manipulating webpages very easily.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65520 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op.jpg\" alt=\"dom output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/dom-op-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>In the above image, I hovered over &lt;h1&gt; tag in the Elements Tab. On the left, notice how the browser highlighted the tag that I selected. It also shows the attribute you choose in your code on your browser window. When you right-click on your node, the browser provides you with the option to add\/ remove an element directly without going to the source file. It also provides a live preview of what changes happened in the webpage when you altered the code.<\/p>\n<h3>Working with the DOM Tree in JavaScript DOM<\/h3>\n<p>To access and modify the DOM tree, you need to follow two steps:<\/p>\n<ul>\n<li>Locate the node representing the element you want.<\/li>\n<li>Works with the node\u2019s content, child elements, and attributes.<\/li>\n<\/ul>\n<p>This is only an overview of all the methods and properties that you will learn further in this tutorial. It acts as a guide when you search for a specific topic in the future. All the methods mentioned are detailed as you continue reading the tutorial, so you will have a strong understanding of all of them when you finish this tutorial. Some DOM methods only work in certain browsers or are buggy. Inconsistent browser support for the DOM was one of the reasons jQuery became popular.<\/p>\n<p>We will discuss the various properties and methods in this tutorial based on the DOM tree given below.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66219\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree.png\" alt=\"Js Dom Tree\" width=\"950\" height=\"667\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree.png 950w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree-150x105.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree-300x211.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree-768x539.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Js-Dom-Tree-520x365.png 520w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><\/p>\n<h3>Accessing the Elements<\/h3>\n<p><strong>DOM Queries<\/strong> are the methods that find elements in the DOM tree. They may return one element or a collection of elements in a NodeList. You can select any element you desire from the NodeList with the help of an index number (starting with 0).<\/p>\n<p>The code mentioned below is the HTML and\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/CSS_code\">CSS code<\/a>, common to all the examples. All you would need to do is add the JavaScript code you want to execute.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;!-- CSS styling --&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n      #page{\r\n        max-width: 400px;\r\n        \t\tmargin: 20px auto 20px auto;\r\n        \t\tborder: 3px solid aqua;\r\n      }\r\n      h1, h2, ul{\r\n        padding: auto;\r\n      }\r\n      p{\r\n        text-align: center;\r\n        font-size: large;\r\n        font-weight: bold;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"page\"&gt;\r\n\r\n      &lt;h1 id=\"header\"&gt;TO DO LIST&lt;\/h1&gt;\r\n      &lt;ul&gt;\r\n        &lt;h2&gt;DataFlair\u2019s JavaScript Tutorial&lt;\/h2&gt;&lt;DataFlair\u2019s&gt;\r\n        &lt;li id=\"one\" class=\"mandatory\"&gt;Learning the concepts&lt;\/li&gt;\r\n        &lt;li id=\"two\" class=\"mandatory\"&gt;Practising the codes&lt;\/li&gt;\r\n        &lt;li id=\"three\"&gt;Taking quizzes&lt;\/li&gt;\r\n        &lt;li id=\"four\"&gt;Solving Interview Questions&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n\r\n      &lt;!-- JavaScript code --&gt;\r\n\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65523\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom.jpg\" alt=\"accessing the element dom\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/accessing-the-element-dom-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<h3>Methods to Select an Individual Element Node<\/h3>\n<p>Following are the methods to select an individual element in the tree:<\/p>\n<ul>\n<li><strong>getElementById(\u2018id\u2019):<\/strong> Uses the unique value of the element\u2019s id attribute. The HTML must have an id attribute for the method to select it.<\/li>\n<\/ul>\n<p><strong>For example &#8211;<\/strong>\u00a0getElementById(\u2018one\u2019)<\/p>\n<ul>\n<li><strong>querySelector(\u2018css selector\u2019):<\/strong> Uses a CSS selector, returns the first matching element.<\/li>\n<\/ul>\n<p><strong>For example &#8211;<\/strong>\u00a0querySelector(\u2018h1\u2019)<\/p>\n<p>The code below combines these methods to add styling to the webpage.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Element-node.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67562\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Element-node.png\" alt=\"Method to select individual element node\" width=\"364\" height=\"186\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Element-node.png 364w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Element-node-150x77.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Element-node-300x153.png 300w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/JavaScript\"&gt;\r\n                       document.getElementById('one').style.color=\"maroon\"; \/\/change font color\r\n        document.querySelector(\"h1\").style.backgroundColor = \"blue\"; \/\/change background color\r\n      &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65526\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element.jpg\" alt=\"single element\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<p><strong>Output:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65528 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output.jpg\" alt=\"single element output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/single-element-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<p><em><strong>Did you check our latest article on <a href=\"https:\/\/data-flair.training\/blogs\/javascript-function\/\">JavaScript Functions<\/a>?<\/strong><\/em><\/p>\n<h3>Methods to Select Multiple Elements (NodeLists)<\/h3>\n<p>There are three common ways to select multiple elements in the tree:<\/p>\n<ul>\n<li><strong>getElementsByClassName():<\/strong> Selects all the elements that have a specified value for the class attribute.<\/li>\n<\/ul>\n<p><strong>For example &#8211;\u00a0<\/strong>getElementsByClassName(\u2018mandatory\u2019)<\/p>\n<ul>\n<li><strong>getElementsByTagName():<\/strong> Selects all the elements that have the specified tag names.<\/li>\n<\/ul>\n<p><strong>For example &#8211;<\/strong> getElementsByTagName(\u2018h1\u2019)<\/p>\n<ul>\n<li><strong>querySelectorAll():<\/strong> Uses a CSS selector, returns all the matching elements.<\/li>\n<\/ul>\n<p><strong>For example &#8211;\u00a0<\/strong>querySelectorAll(\u2018li.mandatory\u2019)<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Methods-to-Select-multiple-elements.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67565\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Methods-to-Select-multiple-elements.png\" alt=\"Methods to Select multiple elements\" width=\"403\" height=\"250\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Methods-to-Select-multiple-elements.png 403w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Methods-to-Select-multiple-elements-150x93.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Methods-to-Select-multiple-elements-300x186.png 300w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/a><\/p>\n<p>The above methods always return a NodeList, even if the list contains only a single element. This fact is important to remember because you need to use square brackets [ ] if you want to access any element in the NodeList. The following code explains all the methods of returning a NodeList.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/JavaScript\"&gt;\r\n        var list_qs = document.querySelectorAll(\"li.mandatory\"); \/\/NodeList\r\n        list_qs[0].style.backgroundColor = \"blue\"; \/\/change background color\r\n        var list_cn = document.getElementsByClassName('mandatory'); \/\/NodeList\r\n        list_cn[0].style.color=\"white\"; \/\/change font color\r\n        var list_tn = document.getElementsByTagName('h1'); \/\/NodeList\r\n        list_tn[0].style.color=\"gray\"; \/\/change font color\r\n      &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65530\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements.jpg\" alt=\"multiple elements\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<p><strong>Output:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-65532 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp.jpg\" alt=\"multiple elements output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/07\/multiple-elements-outputp-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<h3>Traversing between Element Nodes<\/h3>\n<p>You have the facility to navigate between related element nodes. The techniques available for this purpose include:<\/p>\n<ul>\n<li><strong>parentNode:<\/strong> Selects the parent of the current element node (returns a single element).<\/li>\n<li><strong>previousSibling\/ nextSibling:<\/strong> Selects the previous or next sibling from the tree.<\/li>\n<li><strong>firstChild\/ lastChild:<\/strong> Selects the first or last child of the current element.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/traversing-between-element-nodes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67526\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/traversing-between-element-nodes.png\" alt=\"traversing between element nodes - JavaScript DOM\" width=\"454\" height=\"163\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/traversing-between-element-nodes.png 454w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/traversing-between-element-nodes-150x54.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/traversing-between-element-nodes-300x108.png 300w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/a><\/p>\n<p>But we usually avoid these properties for DOM traversal using JavaScript. The reason is whitespace nodes, explained below.<\/p>\n<h4>Whitespace Nodes<\/h4>\n<p>Traversing a DOM tree can be difficult because some browsers add a text node whenever they come across whitespace between elements, except in Internet Explorer. This means that JavaScript interpreter interprets the DOM tree (in the first image) as shown in the second image.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67527\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes.png\" alt=\"white space nodes - JavaScript DOM\" width=\"454\" height=\"92\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes.png 454w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-150x30.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-300x61.png 300w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67528\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2.png\" alt=\"white space nodes - JavaScript DOM\" width=\"530\" height=\"97\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2.png 530w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2-150x27.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2-300x55.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/white-space-nodes-2-520x95.png 520w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><\/p>\n<p>Thus, it is important to strip whitespaces, making the code smaller and faster to read. But this results in a code that is difficult to read. To avoid this, we use jQuery for traversing of DOM.<\/p>\n<h3>Get\/ update Element Content<\/h3>\n<h4>For Text only<\/h4>\n<p>You can access and update the text in the containing element (and its children) with the help of two properties:<\/p>\n<ul>\n<li><strong>textContent<\/strong><br \/>\n<strong>For example &#8211;<\/strong> document.getElementById(\u2018p\u2019).textContent; (accessing)<br \/>\ndocument.getElementById(\u2018p1\u2019).textContent = newText; (updating)<\/li>\n<li><strong>innerText<\/strong><br \/>\n<strong>For example &#8211;<\/strong> document.getElementById(\u2018p\u2019).innerText; (accessing)<br \/>\ndocument.getElementById(\u2018p2\u2019).innerText = newText; (updating)<\/li>\n<\/ul>\n<p style=\"text-align: left\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-get-update-element-content.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67522\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-get-update-element-content.png\" alt=\"JavaScript get update element content diagram - JavaScript DOM\" width=\"370\" height=\"183\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-get-update-element-content.png 370w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-get-update-element-content-150x74.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-get-update-element-content-300x148.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/a><\/p>\n<p>Both these properties replace the entire content of the element, including all the markup present. But you should avoid using innerText since it is not part of any standard. Also, this method slows the speed of content loading on the page.<\/p>\n<h4>For Text and Markup<\/h4>\n<p>The <strong>innerHTML<\/strong> property gets the content of the element and returns it as one long string, including the markup it contains. But you should be careful of where you use this property since there are some security risks associated with it.<\/p>\n<p><strong>For example &#8211;\u00a0<\/strong>document.getElementById(\u2018p\u2019).innerHTML; (accessing)<br \/>\ndocument.getElementById(\u2018p3\u2019).innerHTML = newText; (updating)<\/p>\n<p><em><strong>We strongly recommend you to understand the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-strings\/\">concept of\u00a0JavaScript Strings<\/a><\/strong><\/em><\/p>\n<p>The code below shows the three properties clearly. Run the code on your browser, and see the output on your own. Play with the code, try adding and removing things, and see what happens. This will help you understand how these properties work.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;!-- CSS styling --&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n      p{\r\n        color: blue;\r\n        border: 1px solid aqua;\r\n      }\r\n      #page{\r\n        max-width: 350px;\r\n        margin: 20px auto 20px auto;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id = \"page\"&gt;\r\n      &lt;h3&gt;Accessing and Updating Element Content&lt;\/h3&gt;\r\n      &lt;p id = \"p\"&gt;&lt;em&gt;DataFlair&lt;\/em&gt; tutorial&lt;\/p&gt;\r\n      &lt;p&gt;&lt;em id = \"p1\"&gt;&lt;\/em&gt;&lt;\/p&gt;\r\n      &lt;p&gt;&lt;em id = \"p2\"&gt;&lt;\/em&gt;&lt;\/p&gt;\r\n      &lt;p&gt;&lt;em id = \"p3\"&gt;&lt;\/em&gt;&lt;\/p&gt;\r\n\r\n      &lt;!-- JavaScript Code --&gt;\r\n      &lt;script&gt;\r\n        document.write(\"&lt;b&gt;Accessing elements:&lt;\/b&gt;&lt;\/br&gt;\");\r\n        var x = document.getElementById('p').textContent;\r\n        document.write(\"textContent: \" + x + \"&lt;\/br&gt;\");\r\n        var y = document.getElementById('p').innerText;\r\n        document.write(\"innerText: \" + y + \"&lt;\/br&gt;\");\r\n        var z = document.getElementById('p').innerHTML;\r\n        document.write(\"innerHTML: \" + z + \"&lt;\/br&gt;\");\r\n        \/\/updating elements\r\n        document.getElementById('p1').textContent = \"&lt;strong&gt;JavaScript&lt;\/strong&gt; tutorials\";\r\n        document.getElementById('p2').innerText = \"&lt;strong&gt;JavaScript&lt;\/strong&gt; quizzes\";\r\n        document.getElementById('p3').innerHTML = \"&lt;strong&gt;JavaScript&lt;\/strong&gt; interview questions\";\r\n      &lt;\/script&gt;\r\n    &lt;\/div&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67190 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content.jpg\" alt=\"Get-update-element-content - JavaScript DOM\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Get-update-element-content-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<p><strong>Output:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-67191 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content.jpg\" alt=\"Accessing and updating element content - JavaScript DOM\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Accessing-and-updating-element-content-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<h3>Adding\/ removing HTML Content<\/h3>\n<p>In the above example, we added an HTML <strong>&lt;strong&gt;<\/strong> tag in the page with the help of innerHTML property. To remove any text content, all you need to do is store an empty string in the element.<\/p>\n<p>document.getElementById(\u2018p3\u2019).innerHTML = \u201c \u201d; (empty string)<\/p>\n<p>This will remove the text nodes of the containing and its child elements from the HTML content.<\/p>\n<h4>DOM Manipulation<\/h4>\n<p>Another technique to add\/remove HTML content is DOM Manipulation. To add HTML content to your webpage, you need to follow the three steps discussed below:<\/p>\n<ul>\n<li>Create a new element using <strong>createElement().<\/strong><\/li>\n<li>Give it content by creating a text node using <strong>createTextNode()<\/strong> and adding it to the element using the <strong>appendChild()<\/strong> method.<\/li>\n<li>Add the element to the DOM tree by finding the location and then using <strong>appendChild()<\/strong>.<\/li>\n<\/ul>\n<p>To remove an element from the webpage, the steps are as follows:<\/p>\n<ul>\n<li>Store the element you want to remove in a variable.<\/li>\n<li>Store the parent of that element in another variable.<\/li>\n<li>Remove the element from its containing element using the <strong>removeChild()<\/strong> method.<\/li>\n<\/ul>\n<p>Let\u2019s implement these methods with the help of a code. We will use the same HTML and CSS code we discussed at the beginning of this tutorial. All you need to do is change the JavaScript in your program. In this example, we will add a paragraph &lt;p&gt; tag in the page, and remove the &lt;h1&gt; tag from it.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;script type=\"text\/JavaScript\"&gt;\r\n        \/\/Adding new element\r\n        var newEl = document.createElement('p'); \/\/create element node\r\n        var newText = document.createTextNode('Node added using DOM manipulation.'); \/\/create text node\r\n        newEl.appendChild(newText); \/\/add text node to element node\r\n        var position = document.getElementById(\"page\"); \/\/find the position where you want to add the node\r\n        position.appendChild(newEl); \/\/add element in that position\r\n        \/\/Removing an element\r\n        var removeEl = document.getElementById('header'); \/\/store the element you want to remove\r\n        var containerEl = document.getElementById('page'); \/\/find the element which contains the above element\r\n        containerEl.removeChild(removeEl); \/\/remove the element\r\n      &lt;\/script&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67195 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation.jpg\" alt=\"JavaScript DOM Manipulation\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-Manipulation-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<p><strong>Output:<\/strong><\/p>\n<h3><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-67192 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output.jpg\" alt=\"DOM manipulation output - JavaScript DOM\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/DOM-manipulation-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/h3>\n<h3>Attribute Nodes in JavaScript DOM<\/h3>\n<p>If you have an element, you can easily access its attributes and update them if you wish to. You can do this in two simple steps as shown below:<\/p>\n<ul>\n<li>Select the element node that carries the attribute you want to access, followed by a period symbol.<\/li>\n<li>Use one of the methods or properties to work with the attribute.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67194 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM.jpg\" alt=\"Attribute Nodes in JavaScript DOM\" width=\"802\" height=\"420\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM.jpg 802w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Attribute-Nodes-in-JavaScript-DOM-520x272.jpg 520w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>Here we come to the end of our article on JavaScript DOM. In this article, we discussed every aspect of the Document Object Model (DOM). We understood how we can access the elements of a DOM tree and how to update them. In the end, we also learned how to add and\/or remove an HTML element.<\/p>\n<p><strong><em>The next tutorial lined up for you &#8211;\u00a0<a href=\"https:\/\/data-flair.training\/blogs\/javascript-events\/\">JavaScript Events<\/a><\/em><\/strong><\/p>\n<p>Hope you liked our article. Still, having queries? Let us know through the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The most common thing you\u2019ll need, as a web developer, is a means to manipulate the document structure in some way without much hassle. For this purpose, we use the Document Object Model (DOM),&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":67529,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20821,20819,20818,20820,20822],"class_list":["post-63758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript-adding-removing-html-content","tag-javascript-document-object-model","tag-javascript-dom","tag-javascript-dom-attribute-nodes","tag-javascript-dom-tree"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript DOM (Document Object Model) - Guide for Novice Learners - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about JavaScript DOM or Document Object Model, DOM tree &amp; its working, methods to select individual element node &amp; multiple elements. A Document Object Model is a programming interface for HTML (HyperText Markup Language) &amp; XML (eXtensible Markup Language) documents.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-dom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript DOM (Document Object Model) - Guide for Novice Learners - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about JavaScript DOM or Document Object Model, DOM tree &amp; its working, methods to select individual element node &amp; multiple elements. A Document Object Model is a programming interface for HTML (HyperText Markup Language) &amp; XML (eXtensible Markup Language) documents.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-09T12:18:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-17T16:02:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript DOM (Document Object Model) - Guide for Novice Learners - DataFlair","description":"Learn about JavaScript DOM or Document Object Model, DOM tree & its working, methods to select individual element node & multiple elements. A Document Object Model is a programming interface for HTML (HyperText Markup Language) & XML (eXtensible Markup Language) documents.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-dom\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript DOM (Document Object Model) - Guide for Novice Learners - DataFlair","og_description":"Learn about JavaScript DOM or Document Object Model, DOM tree & its working, methods to select individual element node & multiple elements. A Document Object Model is a programming interface for HTML (HyperText Markup Language) & XML (eXtensible Markup Language) documents.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-dom\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-09T12:18:30+00:00","article_modified_time":"2021-02-17T16:02:15+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript DOM (Document Object Model) &#8211; Guide for Novice Learners","datePublished":"2019-08-09T12:18:30+00:00","dateModified":"2021-02-17T16:02:15+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/"},"wordCount":1946,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg","keywords":["JavaScript Adding\/removing HTML Content","JavaScript Document Object Model","JavaScript DOM","JavaScript DOM Attribute Nodes","JavaScript DOM Tree"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/","url":"https:\/\/data-flair.training\/blogs\/javascript-dom\/","name":"JavaScript DOM (Document Object Model) - Guide for Novice Learners - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg","datePublished":"2019-08-09T12:18:30+00:00","dateModified":"2021-02-17T16:02:15+00:00","description":"Learn about JavaScript DOM or Document Object Model, DOM tree & its working, methods to select individual element node & multiple elements. A Document Object Model is a programming interface for HTML (HyperText Markup Language) & XML (eXtensible Markup Language) documents.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-dom\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Document-Object-Model-DOM.jpg","width":802,"height":420,"caption":"JavaScript Document Object Model (DOM) Tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript DOM (Document Object Model) &#8211; Guide for Novice Learners"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=63758"}],"version-history":[{"count":9,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63758\/revisions"}],"predecessor-version":[{"id":67566,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/63758\/revisions\/67566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/67529"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=63758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=63758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=63758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}