<br />
<b>Warning</b>:  Undefined array key "global_protection_id" in <b>/home/wikitechy/public_html/interview-questions/wp-content/plugins/content-protector/inc/class-ps-rest-handler.php</b> on line <b>51</b><br />
{"id":3969,"date":"2022-03-22T06:51:48","date_gmt":"2022-03-22T06:51:48","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=3969"},"modified":"2022-03-29T12:11:27","modified_gmt":"2022-03-29T12:11:27","slug":"what-is-virtual-dom","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/","title":{"rendered":"What is virtual DOM ?"},"content":{"rendered":"<ul>\n<li style=\"text-align: justify;\">It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.<\/li>\n<li style=\"text-align: justify;\">It\u00a0is a programming concept where an ideal, or \u201cvirtual\u201d, representation of a UI is kept in memory and synced with the \u201creal\u201d DOM by a library such as ReactDOM.<\/li>\n<li style=\"text-align: justify;\"><a href=\"https:\/\/www.wikitechy.com\/tutorials\/react\/reactjs-dom-vs-virtual-dom\">Virtual DOM<\/a> has the same properties as that of the Real DOM, however it lacks the power to directly change the content of the screen.<\/li>\n<li style=\"text-align: justify;\">It is also considered as a part of \u201cvirtual DOM\u201d implementation in React.<\/li>\n<li style=\"text-align: justify;\">Although the concept has been around for several years, it was made more popular by its use in the React framework.<\/li>\n<li style=\"text-align: justify;\">It is Created by \u201c<strong>Richie Harris<\/strong>\u201d.<\/li>\n<\/ul>\n<h4 id=\"why-do-we-need-a-virtual-dom\">Why do we need a virtual DOM ?<\/h4>\n<ul>\n<li>In our client-side application has a super complex structure, which will result in a complicated DOM tree.<\/li>\n<li>Manipulating DOM at once can without problems result in overall performance.<\/li>\n<\/ul>\n<p>For example, let\u2019s take this simple HTML document with an unordered list one list item.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;!doctype html&gt;<br\/>&lt;html lang=&quot;en&quot;&gt;<br\/> &lt;head&gt;&lt;\/head&gt;<br\/><br\/> &lt;body&gt;<br\/>    &lt;ul class=&quot;list&quot;&gt;<br\/>        &lt;li class=&quot;list__item&quot;&gt;List item&lt;\/li&gt;<br\/>    &lt;\/ul&gt;<br\/>  &lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <\/div>\n<p>This document can be represented as the following DOM tree.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-4043 size-full\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png\" alt=\"\" width=\"561\" height=\"321\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png 561w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1-300x172.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1-390x223.png 390w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/p>\n<p>We need to adjust the content of the first list item to &#8220;List item one&#8221; and also add a 2nd listing object. we will need use the DOM APIs to find the elements we need to replace, create the new elements, upload attributes and content, then finally replace the DOM elements themselves.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">const listItemOne = document.getElementsByClassName(&quot;list__item&quot;)[0];<br\/>listItemOne.textContent = &quot;List item one&quot;;<br\/><br\/>const list = document.getElementsByClassName(&quot;list&quot;)[0];<br\/>const listItemTwo = document.createElement(&quot;li&quot;);<br\/>listItemTwo.classList.add(&quot;list__item&quot;);<br\/>listItemTwo.textContent = &quot;List item two&quot;;<br\/>list.appendChild(listItemTwo);<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>It\u00a0is a lightweight JS object which is an in-memory representation of real DOM. It\u00a0is a programming concept where an ideal, or \u201cvirtual\u201d, representation of a UI is kept in memory and synced with the \u201creal\u201d DOM by a library such as ReactDOM. Virtual DOM has the same properties as that of the Real DOM, however [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16662,16656,16654,16661,16663,16655,16658,16657,16664,16660,16666,16665,16659],"class_list":["post-3969","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-advantages-of-virtual-dom-in-react","tag-react-virtual-dom","tag-virtual-dom","tag-virtual-dom-example","tag-virtual-dom-full-form","tag-virtual-dom-in-react","tag-virtual-dom-in-react-js","tag-virtual-dom-react","tag-virtual-dom-vs-real-dom","tag-virtual-dom-vs-real-dom-in-react","tag-what-is-dom-in-react","tag-what-is-real-dom","tag-what-is-virtual-dom-in-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is the virtual DOM ? - React Interview Questions and Answers<\/title>\n<meta name=\"description\" content=\"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the virtual DOM ? - React Interview Questions and Answers\" \/>\n<meta property=\"og:description\" content=\"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-22T06:51:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-29T12:11:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/\",\"name\":\"What is the virtual DOM ? - React Interview Questions and Answers\",\"isPartOf\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png\",\"datePublished\":\"2022-03-22T06:51:48+00:00\",\"dateModified\":\"2022-03-29T12:11:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png\",\"contentUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png\",\"width\":561,\"height\":321},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\/\/www.wikitechy.com\/interview-questions\"],\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is the virtual DOM ? - React Interview Questions and Answers","description":"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.","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:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/","og_locale":"en_US","og_type":"article","og_title":"What is the virtual DOM ? - React Interview Questions and Answers","og_description":"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/","og_site_name":"Wikitechy","article_published_time":"2022-03-22T06:51:48+00:00","article_modified_time":"2022-03-29T12:11:27+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png"}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/","name":"What is the virtual DOM ? - React Interview Questions and Answers","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png","datePublished":"2022-03-22T06:51:48+00:00","dateModified":"2022-03-29T12:11:27+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is the virtual DOM ? - It\u00a0is a lightweight JS object which is an in-memory representation of real DOM.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-virtual-dom\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-virtual-dom-1.png","width":561,"height":321},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=3969"}],"version-history":[{"count":3,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3969\/revisions"}],"predecessor-version":[{"id":4044,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3969\/revisions\/4044"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=3969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=3969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=3969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}