{"id":4715,"date":"2019-05-23T13:12:03","date_gmt":"2019-05-23T07:42:03","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=4715"},"modified":"2026-10-28T15:48:38","modified_gmt":"2026-10-28T10:18:38","slug":"document-object-model","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/document-object-model\/","title":{"rendered":"Document Object Model (DOM) in JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Post Date: May 23, 2019<br>Last Updated: October 28, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Document Object Model (DOM) is a programming interface that represents an HTML document as a tree of objects. When a web page loads in a browser, the browser creates a DOM representation of the document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript uses the DOM to access HTML elements, change their content, modify attributes, and respond to user interactions. For example, you can change the text of a paragraph when a user clicks a button without reloading the entire web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we will explore the DOM and learn how to find and modify HTML elements using JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before getting started, you should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic knowledge of HTML.<\/li>\n\n\n\n<li>A basic understanding of JavaScript.<\/li>\n\n\n\n<li>A web browser to run and test the examples.<\/li>\n\n\n\n<li>A text editor or code editor.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Understand the Document Object Model<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When an HTML document loads in a browser, its elements are represented as objects in a hierarchical structure called the DOM tree.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Consider the following HTML example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;title>Understanding DOM&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1>Welcome&lt;\/h1>\n    &lt;p>This is a sample paragraph.&lt;\/p>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can view the document object in the browser console using JavaScript:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">console.log(document);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>document<\/code> object represents the loaded web page and provides methods for accessing and manipulating its HTML elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Find an HTML Element Using <code>getElementById()<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>getElementById()<\/code> method selects an HTML element using its unique <code>id<\/code> attribute. It is useful when you want to modify a specific element on a web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following example, clicking the button changes the paragraph text.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>DOM getElementById Example&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;p id=\"p1\">This is the original text.&lt;\/p>\n\n&lt;button onclick=\"myFunction()\">Change Text&lt;\/button>\n\n&lt;script>\n    function myFunction() {\n        document.getElementById(\"p1\").textContent = \"New text!\";\n    }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The paragraph has the ID <code>p1<\/code>.<\/li>\n\n\n\n<li><code>document.getElementById(\"p1\")<\/code> selects the paragraph.<\/li>\n\n\n\n<li>The <code>textContent<\/code> property changes the paragraph&#8217;s text.<\/li>\n\n\n\n<li>When the button is clicked, the text changes to \u201cNew text!\u201d<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-9.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"571\" height=\"136\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-9.png\" alt=\"JavaScript DOM example showing a paragraph's text changing after a button click using getElementById().\" class=\"wp-image-12572\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-9.png 571w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-9-300x71.png 300w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-10.png\"><img decoding=\"async\" width=\"481\" height=\"111\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-10.png\" alt=\"\" class=\"wp-image-12573\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-10.png 481w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-10-300x69.png 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Find HTML Elements Using <code>getElementsByTagName()<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>getElementsByTagName()<\/code> method selects HTML elements based on their tag name, such as <code>p<\/code>, <code>h1<\/code>, or <code>button<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It returns a collection of matching elements. You can use the collection&#8217;s <code>length<\/code> property to find the number of matching elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following example counts the paragraph elements in the document.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>DOM getElementsByTagName Example&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;p>Hello World!&lt;\/p>\n    &lt;p>This is another paragraph.&lt;\/p>\n    &lt;p>This is a third paragraph.&lt;\/p>\n\n&lt;button onclick=\"myFunction()\">Count Paragraphs&lt;\/button>\n\n&lt;p id=\"demo\">&lt;\/p>\n\n&lt;script>\n    function myFunction() {\n        var paragraphs = document.getElementsByTagName(\"p\");\n\n        document.getElementById(\"demo\").textContent =\n            \"Number of paragraph elements: \" + paragraphs.length;\n    }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>document.getElementsByTagName(\"p\")<\/code> selects all paragraph elements.<\/li>\n\n\n\n<li><code>paragraphs.length<\/code> returns the number of matching elements.<\/li>\n\n\n\n<li><code>document.getElementById(\"demo\")<\/code> selects the element where the result will be displayed.<\/li>\n\n\n\n<li>When you click the button, the number of paragraph elements is displayed.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The result is <code>4<\/code> because the page contains three original paragraphs and the paragraph used to display the result.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153717.png\"><img decoding=\"async\" width=\"715\" height=\"197\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153717.png\" alt=\"\" class=\"wp-image-12574\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153717.png 715w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153717-300x83.png 300w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153722.png\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"237\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153722.png\" alt=\" JavaScript DOM example demonstrating how getElementsByTagName() selects paragraph elements and displays the number of matches.\" class=\"wp-image-12575\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153722.png 737w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-2026-10-28-153722-300x96.png 300w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Find HTML Elements Using <code>getElementsByClassName()<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>getElementsByClassName()<\/code> method selects elements using their class name. It returns a collection containing all matching elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, JavaScript selects all elements with the class name <code>message<\/code> and updates their text.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>DOM getElementsByClassName Example&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;p class=\"message\">First message&lt;\/p>\n    &lt;p class=\"message\">Second message&lt;\/p>\n\n&lt;button onclick=\"updateMessages()\">Update Messages&lt;\/button>\n\n&lt;script>\n    function updateMessages() {\n        var messages = document.getElementsByClassName(\"message\");\n\n        for (var i = 0; i &lt; messages.length; i++) {\n            messages[i].textContent = \"Message updated!\";\n        }\n    }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>document.getElementsByClassName(\"message\")<\/code> selects elements with the specified class.<\/li>\n\n\n\n<li>The <code>for<\/code> loop iterates through the matching elements.<\/li>\n\n\n\n<li><code>messages[i].textContent<\/code> Updates the text of each element.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you click the button, both messages change to \u201cMessage updated!\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"157\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-11.png\" alt=\"First image\" class=\"wp-image-12576\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-11.png 702w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-11-300x67.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-12.png\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"172\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-12.png\" alt=\"second image \n\" class=\"wp-image-12577\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-12.png 688w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-12-300x75.png 300w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Modify DOM Content Using JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript can dynamically change the content of an HTML element through the DOM. The following example demonstrates how to update a heading when a user clicks a button.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Modify DOM Content&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h2 id=\"heading\">Original Heading&lt;\/h2>\n\n&lt;button onclick=\"updateHeading()\">Update Heading&lt;\/button>\n\n&lt;script>\n    function updateHeading() {\n        var heading = document.getElementById(\"heading\");\n        heading.textContent = \"Updated Heading\";\n    }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>document.getElementById(\"heading\")<\/code> selects the heading element.<\/li>\n\n\n\n<li><code>heading.textContent<\/code> changes the heading&#8217;s displayed text.<\/li>\n\n\n\n<li>Clicking the button changes \u201cOriginal Heading\u201d to \u201cUpdated Heading\u201d.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Save the complete code as <code>index.html<\/code> and open it in a web browser to test the example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"125\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-13.png\" alt=\"original heading\" class=\"wp-image-12578\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-13.png 641w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-13-300x59.png 300w\" sizes=\"(max-width: 641px) 100vw, 641px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"126\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-14.png\" alt=\"Updated heading\" class=\"wp-image-12579\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-14.png 686w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/image-14-300x55.png 300w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Document Object Model enables JavaScript to interact with HTML documents dynamically. It allows developers to find elements, update text, and create interactive web pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The key methods covered in this article are <code>getElementById()<\/code>, <code>getElementsByTagName()<\/code>, and <code>getElementsByClassName()<\/code>. The <code>textContent<\/code> property can then be used to read or update an element&#8217;s text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding these DOM methods provides an important foundation for JavaScript development and interactive web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. What is the Document Object Model in JavaScript?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The DOM is a programming interface that represents an HTML document as a tree of objects. JavaScript uses it to access and modify elements on a web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. What is the difference between <code>getElementById()<\/code> and <code>getElementsByTagName()<\/code>?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>getElementById()<\/code> returns a single matching element or <code>null<\/code> if no element is found. <code>getElementsByTagName()<\/code> returns a collection of elements matching the specified tag name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Can JavaScript change HTML content using the DOM?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. JavaScript can change element text, attributes, and other properties using DOM methods and properties such as <code>textContent<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Links<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/dynamic-dependent-drop-list-using-htmlphpmysqlajax\/\">Dynamic Dependent Drop-Down List Using HTML, PHP, MySQL, and AJAX<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Official Links<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: Document Object Model (DOM)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: <\/a><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" target=\"_blank\" rel=\"noopener\">getElementById()<\/a><\/code><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementsByTagName\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: <\/a><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementsByTagName\" target=\"_blank\" rel=\"noopener\">getElementsByTagName()<\/a><\/code><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementsByClassName\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: <\/a><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementsByClassName\" target=\"_blank\" rel=\"noopener\">getElementsByClassName()<\/a><\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to Our Experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Looking for a technology partner for your development or IT requirements? Our team can help you explore suitable solutions for your business.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contact our experts: <a href=\"https:\/\/pheonixsolutions.com\/contact\">https:\/\/pheonixsolutions.com\/contact<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: May 23, 2019Last Updated: October 28, 2026 Introduction The Document Object Model (DOM) is a programming interface that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[665],"class_list":["post-4715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-architecture","tag-dom","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1e3","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/JavaScript-DOM-Tutorial-Visual-Guide.png","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4715"}],"version-history":[{"count":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4715\/revisions"}],"predecessor-version":[{"id":12581,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4715\/revisions\/12581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media\/12580"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}