{"id":10573,"date":"2019-10-14T15:09:27","date_gmt":"2019-10-14T19:09:27","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=10573"},"modified":"2021-03-06T15:48:23","modified_gmt":"2021-03-06T20:48:23","slug":"javascript-manipulating-the-document-object-model-dom","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/","title":{"rendered":"JavaScript Manipulating the Document Object Model (DOM)"},"content":{"rendered":"\n<p>The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and manipulate this tree programmatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why use DOM?<\/h2>\n\n\n\n<p>The DOM is used to access and manipulate elements in an HTML document. But why do we need to use the DOM for this? Let&#8217;s understand this by use of an example. Let&#8217;s suppose we have an input field and a button next to it. When the button is clicked, whatever typed in the input field should appear below the input field. How can we do this with plain HTML? We need to dynamically access the value of the input field on the button click and then display the value below in a paragraph. We will implement this example, but first, we should discuss DOM methods that will be needed for accessing and manipulating elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methods and\nproperties of DOM<\/h2>\n\n\n\n<p>There are three basic methods of DOM for\naccessing elements.<\/p>\n\n\n\n<ul class=\"circle\"><li>document.getElementById(): This method is used to access element by ID.<\/li><li>document.getElementsByTagName(): This method is used to access element by the tag name.<\/li><li>document.getElementsByClassName(): This method is used to access element by the class name.<\/li><\/ul>\n\n\n\n<p>Out of these three, getElementById() is the most commonly used method. There are a few properties that can be used with these methods:<\/p>\n\n\n\n<ul class=\"circle\"><li>innerHTML: This property is used to change the inner HTML(value) of an element.<\/li><li>attribute: This property is used to change the attribute value of an element.<\/li><li>style.property: This property is used to change the style of an element.<\/li><li>value: This property is used to access the value of the input text field.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adding and\ndeleting elements<\/h2>\n\n\n\n<p>The DOM also provides methods for adding and deleting elements.<\/p>\n\n\n\n<ul class=\"circle\"><li>document.createElement(): This method is used to create a new element.<\/li><li>document.removeChild(): This method is used to remove an element.<\/li><li>document.appendChild(): This method is used to append an element.<\/li><li>document.replaceChild(): This method is used to replace an element with another element.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing and\nmanipulating elements<\/h2>\n\n\n\n<p>Earlier, we discussed an example of displaying data typed in the input field, let&#8217;s take a look at this in more detail. This is the HTML code for the input field and the button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;input type=\"text\" id=\"input\" \/>\n&lt;button onclick=\"myFunction()\">\n    Display\n&lt;\/button>\n&lt;p id = \"para\" > &lt;\/p><\/code><\/pre>\n\n\n\n<p>When the button is clicked, myFunction()\nwill be invoked. We will access the input field using the\ndocument.getElementById() method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">var value  = document.getElementById(\"input\").value;<\/code><\/pre>\n\n\n\n<p>Here we are <strong>using the value property to access the value of the input text field, and then we are storing it in the value variable<\/strong>. Now we have the value, the next step is to display this value in the paragraph. But first, we need to access the paragraph. Again, we will use the document.getElementById() method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.getElementById(\"para\")<\/code><\/pre>\n\n\n\n<p>But we also need to change its value.\nCurrently, its value is nothing. So to change its value, we will use the\ninnerHTML property.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.getElementById(\"para\").innerHTML = value;<\/code><\/pre>\n\n\n\n<p>Now, let&#8217;s put this altogether in one file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;html>\n    &lt;body>\n        &lt;input type=\"text\" id=\"input\" \/>\n\t&lt;button onclick=\"myFunction()\">Display&lt;\/button>\n\t&lt;p id = \"para\" > &lt;\/p>\n    &lt;\/body>\n    &lt;script>\n    function myFunction(){\n        var value  = document.getElementById(\"input\").value;\n        document.getElementById(\"para\").innerHTML = value;\n    }\n    &lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>This is how we access and manipulate\nelements using DOM.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Changing style <\/h2>\n\n\n\n<p>We can also change the style of an element\nusing DOM. Consider the following HTML code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;p onclick=\"myFunction()\" id=\"para\"> Click on this paragraph to change its color. &lt;\/p><\/code><\/pre>\n\n\n\n<p>There is a paragraph. Clicking on this\nparagraph will invoke myFunction(). We will change the color as well as the\ntext of this paragraph.<\/p>\n\n\n\n<p>To change the color, we will use the\nstyle.property method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.getElementById(\"para\").style.color = \"red\";<\/code><\/pre>\n\n\n\n<p>To change the text, we will use the\ninnerHTML property.<\/p>\n\n\n\n<p>document.getElementById(&#8220;para&#8221;).innerHTML\n= &#8220;Color of this paragraph is red&#8221;;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.getElementById(\"para\").innerHTML = \"Color of this paragraph is red\";<\/code><\/pre>\n\n\n\n<p>Here, we again used the\ndocument.getElementById() method to access the element.<\/p>\n\n\n\n<p>Let&#8217;s put all of this together.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;html>\n    &lt;body>\n        &lt;p onclick=\"myFunction()\" id=\"para\"> Click on this paragraph to change its color. &lt;\/p>\n    &lt;\/body>\n    &lt;script>\n        function myFunction(){\n\t    document.getElementById(\"para\").style.color = \"red\";\n\t    document.getElementById(\"para\").innerHTML = \"Color of this paragraph is red\";\n        }\n    &lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Now, when the text is clicked, its color,\nas well as the text of the paragraph, will be changed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating an element <\/h2>\n\n\n\n<p>The DOM also provides methods to create a new element. Let&#8217;s create a paragraph and adding into the body using these methods.<\/p>\n\n\n\n<p>The first step is to create a paragraph\nusing the createElement() method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.createElement(\"P\");<\/code><\/pre>\n\n\n\n<p>We need to store it into a variable.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">var newPara = document.createElement(\"P\");<\/code><\/pre>\n\n\n\n<p>We have a paragraph, now we need to add\nsome text into it. We will use the innerHTML property to add the text.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">newPara.innerHTML = \"This is a paragraph\"<\/code><\/pre>\n\n\n\n<p>Our element is ready. Let&#8217;s append it to\nthe body of the document using the appendChild() method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">document.body.appendChild(newPara)<\/code><\/pre>\n\n\n\n<p>Everything is ready now. But we need\nsomething to implement all this. Let&#8217;s create a button for this.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;button onclick=\"myFunction()\"> Click &lt;\/button><\/code><\/pre>\n\n\n\n<p>Let&#8217;s put all this in one file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;html>\n    &lt;body>\n\t&lt;button onclick=\"myFunction()\"> Click to add an element &lt;\/button>\n    &lt;\/body>\n    &lt;script>\n        function myFunction(){\n\t    var newPara = document.createElement(\"P\")\n\t    newPara.innerHTML = \"This is a paragraph\"\n\t    document.body.appendChild(newPara)\n        }\n    &lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>When the button is clicked, a new paragraph\nwill be created and appended to the body of the document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">querySelector()<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">querySelector()<\/code><\/pre>\n\n\n\n<p>Until now, we discussed three ways of selecting elements. We used getElementById(), however there is another method we can use called the querySelector() method.<\/p>\n\n\n\n<p>The querySelector() method returns only the\nvery first matched element. Let&#8217;s understand with the help of an example.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;html>\n    &lt;body>\n\t&lt;button onclick=\"myFunction()\">Click &lt;\/button>\n\t&lt;p class=\"para\"> This is the first paragraph &lt;\/p>\n\t&lt;p class=\"para\"> This is the second paragraph &lt;\/p>\n\t&lt;p class=\"para\"> This is the third paragraph &lt;\/p>\t\n    &lt;\/body>\n    &lt;script>\n        function myFunction(){\n\t    document.querySelector(\".para\").style.color = \"red\"\n        }\n    &lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>The above example has a button and three\nparagraphs. All the paragraphs have a common class. In the script, inside\nmyFunction(), we have used the querySelector to change the color where the\nclass is &#8220;para&#8221;. Since each paragraph has the same class, what do you\nthink will happen here? Colors of all the paragraphs will change? No! Because\nwe are using querySelector, the color of only the first matching paragraph will\nchange. <\/p>\n\n\n\n<p>This is how the querySelector() method\nworks. But if we want to match all the elements, we can use the\nquerySelectorAll() method.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping it up<\/h2>\n\n\n\n<p>So this is the basic overview of DOM and\nhow to use its methods and properties to access and manipulate elements. These\nwere the basic as well as the most commonly used methods in DOM manipulation.\nWhen you will dive deeper, you will find many other methods and properties. DOM\nmanipulation is one the easiest and at the same time, one the most important\npart of web application development.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[11499,8212,7349],"post_series":[7348],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan<\/title>\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.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan\" \/>\n<meta property=\"og:description\" content=\"The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Ian Carnaghan\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T19:09:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-06T20:48:23+00:00\" \/>\n<meta name=\"author\" content=\"Ian Carnaghan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:site\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Carnaghan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\"},\"author\":{\"name\":\"Ian Carnaghan\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"headline\":\"JavaScript Manipulating the Document Object Model (DOM)\",\"datePublished\":\"2019-10-14T19:09:27+00:00\",\"dateModified\":\"2021-03-06T20:48:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\"},\"wordCount\":977,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"keywords\":[\"Bitesize JavaScript\",\"CMST 388\",\"JavaScript\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\",\"url\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\",\"name\":\"JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/#website\"},\"datePublished\":\"2019-10-14T19:09:27+00:00\",\"dateModified\":\"2021-03-06T20:48:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.carnaghan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Manipulating the Document Object Model (DOM)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.carnaghan.com\/#website\",\"url\":\"https:\/\/www.carnaghan.com\/\",\"name\":\"Ian Carnaghan\",\"description\":\"Software Developer, Blogger, Educator\",\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.carnaghan.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\",\"name\":\"Ian Carnaghan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"caption\":\"Ian Carnaghan\"},\"logo\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\"},\"description\":\"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.\",\"sameAs\":[\"http:\/\/www.carnaghan.com\",\"https:\/\/x.com\/icarnaghan\"],\"url\":\"https:\/\/www.carnaghan.com\/author\/icarnaghan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan","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.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan","og_description":"The way in which logical structure of a document is accessed and manipulated in HTML is known as Document Object Model or DOM. It is a programming interface for HTML. Whenever a document loads in the browser, a tree-like (or forest) structure is created. Methods provided by the DOM can be used to access and [&hellip;]","og_url":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/","og_site_name":"Ian Carnaghan","article_published_time":"2019-10-14T19:09:27+00:00","article_modified_time":"2021-03-06T20:48:23+00:00","author":"Ian Carnaghan","twitter_card":"summary_large_image","twitter_creator":"@icarnaghan","twitter_site":"@icarnaghan","twitter_misc":{"Written by":"Ian Carnaghan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#article","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/"},"author":{"name":"Ian Carnaghan","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"headline":"JavaScript Manipulating the Document Object Model (DOM)","datePublished":"2019-10-14T19:09:27+00:00","dateModified":"2021-03-06T20:48:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/"},"wordCount":977,"commentCount":0,"publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"keywords":["Bitesize JavaScript","CMST 388","JavaScript"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/","url":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/","name":"JavaScript Manipulating the Document Object Model (DOM) - Ian Carnaghan","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/#website"},"datePublished":"2019-10-14T19:09:27+00:00","dateModified":"2021-03-06T20:48:23+00:00","breadcrumb":{"@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.carnaghan.com\/javascript-manipulating-the-document-object-model-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.carnaghan.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Manipulating the Document Object Model (DOM)"}]},{"@type":"WebSite","@id":"https:\/\/www.carnaghan.com\/#website","url":"https:\/\/www.carnaghan.com\/","name":"Ian Carnaghan","description":"Software Developer, Blogger, Educator","publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.carnaghan.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5","name":"Ian Carnaghan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","caption":"Ian Carnaghan"},"logo":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/"},"description":"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.","sameAs":["http:\/\/www.carnaghan.com","https:\/\/x.com\/icarnaghan"],"url":"https:\/\/www.carnaghan.com\/author\/icarnaghan\/"}]}},"views":705,"_links":{"self":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/10573"}],"collection":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/comments?post=10573"}],"version-history":[{"count":0,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/10573\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/media?parent=10573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/categories?post=10573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/tags?post=10573"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/post_series?post=10573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}