{"id":730,"date":"2020-08-30T12:58:07","date_gmt":"2020-08-30T12:58:07","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=730"},"modified":"2020-09-26T08:34:40","modified_gmt":"2020-09-26T08:34:40","slug":"what-is-dom","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/what-is-dom\/","title":{"rendered":"What is DOM"},"content":{"rendered":"\n<p>The&nbsp;<strong>Document Object Model<\/strong>&nbsp;(<strong>DOM<\/strong>) is a tree representation of a document on the web. It consists of objects representing logical structure of a document and the content in it. The objects are organized in a hierarchical order. The main objective of <strong>DOM<\/strong> is to provide standard API for HTML (and XML) documents so that the documents can be dynamically accessed and manipulated (update the content, structure, and style) easily using any programming language.&nbsp; <\/p>\n\n\n\n<p>Let&#8217;s consider a simple web page to understand DOM.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html>\n  &lt;head>\n    &lt;title> DOM Example&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    &lt;h1 id=\"header\"> Hello World! &lt;\/h1>\n    &lt;p> Some Text &lt;\/p>\n  &lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>Here is how the DOM of above document would look like:<\/p>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"377\" src=\"https:\/\/www.datatype.co.in\/blog\/wp-content\/uploads\/2020\/08\/dom-example.png\" alt=\"DOM Example\" class=\"wp-image-835 pad15\" srcset=\"https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/08\/dom-example.png 617w, https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/08\/dom-example-300x183.png 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure>\n\n\n<p>The <strong>document<\/strong> object is the parent of all other objects in the page. An object in DOM can be an <strong>element<\/strong> node, a <strong>text<\/strong> node or <strong>attribute<\/strong> node. Note that browser parse and creates DOM every time a web page is loaded. <\/p>\n\n\n\n<p>JavaScript has some inbuilt methods for accessing and manipulating DOM. In the upcoming article, I will discuss about this in detail. Stay tuned. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;Document Object Model&nbsp;(DOM) is a tree representation of a document on the web. It consists of objects representing logical structure of a document and the content in it. The objects&nbsp;[ &hellip; ]<\/p>\n","protected":false},"author":1,"featured_media":876,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,2],"tags":[228,232,229,231,230,100],"class_list":["post-730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-javascript","tag-dom","tag-dom-example","tag-dom-fullform","tag-dom-html","tag-dom-meaning","tag-js-interview-question","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":48,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":1079,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions\/1079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media\/876"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}