{"id":42638,"date":"2019-01-04T17:18:37","date_gmt":"2019-01-04T09:18:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42638"},"modified":"2018-12-20T18:19:53","modified_gmt":"2018-12-20T10:19:53","slug":"understanding-document-object-model","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/","title":{"rendered":"Understanding Document Object Model (DOM) in Details"},"content":{"rendered":"

We have all heard of the DOM<\/strong>, or Document Object Model<\/strong>, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in web development. Without it, we wouldn\u2019t be able to dynamically modify HTML pages<\/strong> in the browser.<\/p>\n

Learning and understanding the DOM results in better ways of accessing, changing, and monitoring<\/strong> different elements of an HTML page. The Document Object Model may also help us reduce unnecessary increases in script execution time<\/strong>.<\/p>\n

Read Also:<\/strong> 15 JavaScript Methods For DOM Manipulation for Web Developers<\/a><\/p>\n

Data structure trees<\/h2>\n

Before talking about what the DOM is, how it comes into existence, how it exists, and what happens inside of it, I want you to know about trees. Not the coniferous & deciduous kind but about the data structure tree<\/strong>.<\/p>\n

It\u2019s a lot easier to comprehend the concept of data structures if we simplify its definition. I would say, a data structure is about arranging your data<\/strong>. Yes, just plain old arrangement, as you would arrange the furniture in your house or books in a bookshelf or all the different food groups you\u2019re having for a meal on your plate in order to make it meaningful to you<\/strong>.<\/p>\n

Of course, that\u2019s not all there is to a data structure, but that\u2019s pretty much where it all starts. This \u201carrangement\u201d<\/strong> is at the heart of it all. It\u2019s pretty important in the DOM as well. But we\u2019re not talking about DOM yet, so let me steer you towards a data structure that you might be familiar with: arrays<\/strong>.<\/p>\n

Arrays & trees<\/h3>\n

Arrays have indices<\/strong> and length<\/strong>, they can be multi-dimensional<\/strong>, and have many more characteristics. As much as important it is to know these things about arrays, let\u2019s not bother ourselves with that right now. To us, an array is pretty simple. It\u2019s when you arrange different things in a line<\/strong>.<\/p>\n

\"Illustration<\/figure>\n

Similarly, when thinking of trees, let\u2019s say, it\u2019s about putting things below one another<\/strong>, starting with only one thing at the top.<\/p>\n

\"Illustration<\/figure>\n

Now, you might take the single line ducks from before, turn it upright<\/strong>, and tell me that \u201cnow, every duck is under another duck\u201d. Is it a tree then? It is.<\/p>\n

Depending on what your data is or how you\u2019ll be using it, the topmost data in your tree (called the root<\/strong>) might be something that is of great importance<\/strong> or something that\u2019s only there to enclose other elements underneath it<\/strong>.<\/p>\n

Either way, the topmost element in a tree data structure does something very important. It provides a place to start searching for any information we want to extract from the tree<\/strong>.<\/p>\n

\"Searching<\/figure>\n

The meaning of DOM<\/h2>\n

DOM stands for Document Object Model<\/strong>. The Document points to an HTML (XML) document<\/strong> which is represented as an Object<\/strong>. (In JavaScript everything can ever only be represented as an object!)<\/p>\n

The Model is created by the browser<\/strong> that takes an HTML document and creates an object that represents it. We can access this object with JavaScript. And since we use this object to manipulate the HTML document and build our own applications, DOM is basically an API<\/abbr><\/strong>.<\/p>\n

The DOM tree<\/h2>\n

In JavaScript code, the HTML document is represented as an object<\/strong>. All the data read from that document are also saved as objects<\/strong>, nested under one another (because like I said before, in JavaScript everything can ever only be represented as objects).<\/p>\n

So, this is basically the physical arrangement of DOM data in code: everything is arranged as objects<\/strong>. Logically, however, it\u2019s a tree<\/strong>.<\/p>\n

The DOM Parser<\/h2>\n

Every browser software has a program called DOM Parser<\/strong> that is responsible for parsing an HTML document into DOM<\/strong>.<\/p>\n

Browsers read an HTML page and turn its data into objects that make up the DOM. The information present in these JavaScript DOM\tobjects are logically arranged as a data structure tree known as the DOM tree.<\/p>\n

\"DOM<\/figure>\n

Parsing data from HTML to the DOM tree<\/h2>\n

Take a simple HTML file. It has the root element<\/strong> <html><\/code>. Its sub-elements<\/strong> are <head><\/code> and <body><\/code>, each has many child elements of their own.<\/p>\n

So essentially, the browser reads the data in the HTML document<\/strong>, something similar to this:<\/p>\n

\r\n<html>\r\n  <head>\r\n    <meta\/>\r\n    <link\/>\r\n  <\/head>\r\n  <body>\r\n    <header>\r\n\t\t  <h1><\/h1>\r\n\t\t\t   <h2><\/h2>\r\n    <\/header>\r\n    <main>\r\n\t\t  <article>\r\n\t\t\t\t<p><\/p>\r\n\t\t\t\t<p><\/p>\r\n\t\t\t\t<p><\/p>\r\n\t\t  <\/article>\r\n    <\/main>\r\n    <footer>\r\n\t\t  <div><\/div>\r\n    <\/footer>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
And, arranges them into a DOM tree<\/strong> like this:<\/p>\n
\"DOM<\/figure>\n
The representation of each HTML element (and its belonging content) in the DOM tree is known as a Node<\/a><\/strong>. The root node<\/strong> is the node of <html><\/code>.<\/p>\n
The DOM interface<\/strong> in JavaScript is called document<\/code> (since it\u2019s the representation of the HTML document). Thus, we access the DOM tree of an HTML document through the document<\/code><\/a> interface<\/strong> in JavaScript.<\/p>\n
We can\u2019t only access, but also manipulate the HTML document<\/strong> through the DOM. We can add elements to a web page, remove & update them. Each time we change or update any nodes in the DOM tree, it reflects on the web page<\/strong>.<\/p>\n
How nodes are designed<\/h2>\n
I have mentioned before that every piece of data from an HTML document is saved as an object in JavaScript<\/strong>. So, how the data saved as an object can be logically arranged as a tree?<\/p>\n
The nodes of a DOM tree have certain characteristics or properties. Almost every node in a tree has a parent node<\/strong> (the node right above it), child nodes<\/strong> (the nodes below it) and siblings<\/strong> (other nodes belonging to the same parent). Having this family<\/em> above, below, and around a node is what qualifies it as a part of a tree<\/strong>.<\/p>\n
This family information of every node is saved as properties in the object representing that node<\/strong>. For example, children<\/code><\/a> is a property of a node that carries a list of the child elements of that node, thus logically arranging its child elements under the node.<\/p>\n
Avoid overdoing DOM manipulation<\/h2>\n
As much as we may find updating the DOM useful (in order to modify a web page), there is such a thing as overdoing it<\/strong>.<\/p>\n
Say, you want to update the color of a <div><\/code> on a web page using JavaScript. What you need to do is accessing its corresponding DOM node object<\/strong> and update the color property. This shouldn\u2019t affect the rest of the tree (the other nodes in the tree).<\/p>\n
But, what if you want to remove a node from a tree<\/strong> or add one to it<\/strong>? The whole tree might have to be rearranged<\/strong>, with the node removed or added to the tree. This is a costly job. It takes time and browser resource to get this job done.<\/p>\n
For example, let\u2019s say, you want to add five extra rows to a table<\/strong>. For every row, when its new nodes are created and added to the DOM, the tree is updated each time<\/strong>, adding up to five updates in total.<\/p>\n
We can avoid this by using the DocumentFragment<\/code><\/a> interface. Think of it as a box that could hold all the five rows<\/strong> and be added to the tree. This way the five rows are added as one single piece of data<\/strong> and not one by one, leading to only one update in the tree.<\/p>\n
This doesn\u2019t only happen when we remove or add elements, but resizing an element<\/strong> can also affect other nodes, as the resized element might need other elements around it to adjust their size<\/strong>. So, the corresponding nodes of all the other elements will need to be updated and the HTML elements will be rendered again according to the new rules.<\/p>\n
Likewise, when the layout of a web page as a whole is affected, a part or the whole of the web page might be re-rendered<\/strong>. This is process is known as Reflow<\/a><\/strong>. In order to avoid excessive reflow<\/strong> make sure you\u2019re not changing the DOM too much. Changes to the DOM aren\u2019t the only thing that can cause Reflow on a web page. Depending on the browser, other factors can contribute to it, too.<\/p>\n
Wrapping up<\/h2>\n
Wrapping things up, the DOM is visualized as a tree<\/strong> made up of all the elements found in an HTML document. Physically (as physical as anything digital can get), it\u2019s a set of nested JavaScript objects<\/strong> of which properties and methods hold the information that makes it possible to logically arrange them into a tree<\/strong>.<\/p>\n
Read Also:<\/strong> The Beginners Guide to CSS Object Model (CSSOM)<\/a><\/p>","protected":false},"excerpt":{"rendered":"
We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in web development. Without it, we wouldn\u2019t be able to dynamically modify HTML pages in the browser. Learning and understanding the DOM results in better ways of accessing,…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3554,4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nUnderstanding Document Object Model (DOM) in Details - Hongkiat<\/title>\n<meta name=\"description\" content=\"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in\" \/>\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.hongkiat.com\/blog\/understanding-document-object-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Document Object Model (DOM) in Details\" \/>\n<meta property=\"og:description\" content=\"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-04T09:18:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Understanding Document Object Model (DOM) in Details\",\"datePublished\":\"2019-01-04T09:18:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/\"},\"wordCount\":1389,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-document-object-model\\\/array-1.jpg\",\"keywords\":[\"DOM\",\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/\",\"name\":\"Understanding Document Object Model (DOM) in Details - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-document-object-model\\\/array-1.jpg\",\"datePublished\":\"2019-01-04T09:18:37+00:00\",\"description\":\"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-document-object-model\\\/array-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-document-object-model\\\/array-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-document-object-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Document Object Model (DOM) in Details\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding Document Object Model (DOM) in Details - Hongkiat","description":"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in","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.hongkiat.com\/blog\/understanding-document-object-model\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Document Object Model (DOM) in Details","og_description":"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in","og_url":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-01-04T09:18:37+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Understanding Document Object Model (DOM) in Details","datePublished":"2019-01-04T09:18:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/"},"wordCount":1389,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg","keywords":["DOM","Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/","url":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/","name":"Understanding Document Object Model (DOM) in Details - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg","datePublished":"2019-01-04T09:18:37+00:00","description":"We have all heard of the DOM, or Document Object Model, that gets mentioned from time to time, related to JavaScript. DOM is a pretty important concept in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-document-object-model\/array-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-document-object-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Document Object Model (DOM) in Details"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-b5I","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=42638"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42638\/revisions"}],"predecessor-version":[{"id":42639,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42638\/revisions\/42639"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42638"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}