{"id":1416,"date":"2019-12-19T10:18:00","date_gmt":"2019-12-18T23:18:00","guid":{"rendered":"https:\/\/www.dynamicwebtraining.com.au\/blog\/?p=1416"},"modified":"2024-11-14T15:08:41","modified_gmt":"2024-11-14T04:08:41","slug":"dom-element-in-javascript","status":"publish","type":"post","link":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript","title":{"rendered":"What is a DOM element in JavaScript? How does it work?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">JavaScript is an object-based scripting language developed by Netscape Communications. It\u2019s a light weighted language used for embedding interactivity in HTML webpages. And JS is an interpreted language, which means it\u2019s not precompiled before execution. Another important thing is the difference between Java &amp; JavaScript. Java was developed by Sun Microsystems. Whereas, JavaScript is not a sub-language of Java.<\/p>\n\n\n\n<!--more-->\n\n\n\n<br>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg\" alt=\"What is a DOM element in JavaScript - Dynamic Web Training\" class=\"wp-image-1422\" srcset=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg 1024w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-300x157.jpg 300w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<br>\n\n\n\n<p class=\"wp-block-paragraph\">JS is a scripting language whose original name is \u201cMocha,\u201d which was changed to LiveScript &amp; then to JavaScript. The core of JavaScript is ECMAScript, on which it is built. Let it be JS\/AS\/Jscript; all are different but use ECMA as their engine. Nowadays, it is prevalent in web apps, webpages &amp; MEAN stack.<\/p>\n\n\n\n<br>\n\n\n\n<h2 class=\"wp-block-heading\">What is DOM &amp; its elements in JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">DOM or Document Object Model is an API (Application programming interface) that defines a logical layout of content &amp; how it\u2019s accessed and manipulated. Using DOM, programmers can build, construct, add, modify, delete, or navigate elements or contents. Everything present on an HTML webpage can be edited using DOM.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Earlier JavaScript &amp; DOM were intertwined, but as the language evolved, both were separated as an individual entity. DOM is not a programming language but just a way to access\/modify data. Without DOM, JavaScript won\u2019t have any model, layout of webpages, XML, or HTML documents. Probably everything in a document, head, tables, header, footer, text, table, etc. is considered within DOM.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In short, data\/content is stored in DOM, which can be accessed or modified using JavaScript. Following is a pictorial representation of the same.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"400\" src=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-01.jpg\" alt=\"DOM Elements  - Dynamic Web Training\" class=\"wp-image-1418\" srcset=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-01.jpg 900w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-01-300x133.jpg 300w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How does DOM works?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Document Object Model or DOM is an interface that defines how the browser reads your XML or HTML document. JavaScript is allowed to manipulate structure &amp; style your webpage. Once the browser reads the HTML document, it creates a representational tree known as the Document Object Model. It also defines how that tree is to be accessed. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Following is a diagram of HTML DOM TREE of objects:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-02-1024x768.jpg\" alt=\"DOM Chart  - Dynamic Web Training\" class=\"wp-image-1419\" srcset=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-02-1024x768.jpg 1024w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-02-300x225.jpg 300w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-02.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There are major four elements of DOM as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2022 Document: Treats all the HTML documents\n\u2022 Elements: Tags used inside HTML document\n\u2022 Text: Content of tags\n\u2022 Attributes: Here, \u201chref\u201d is an attribute<\/code><\/pre>\n\n\n\n<br>\n\n\n\n<p class=\"wp-block-paragraph\">DOM provides both methods &amp; properties parts of the document. For example, if the webpage is a computer, then DOM would have parts \u2013 ram, motherboard, hard disk, case. Etc. Programmers can write instructions to integrate these parts &amp; make it run. Here instruction is \u201cJavaScript,\u201d &amp; the illustration of the object is \u201cDOM.\u201d That is, HTML represents a tree, but DOM represents the specification of that tree.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The moment we load an HTML document, DOM designs it in a representational tree. Following is a representation of DOM &amp; HTML document.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-03-1024x768.jpg\" alt=\"HTML Document - Dynamic Web Training\" class=\"wp-image-1420\" srcset=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-03-1024x768.jpg 1024w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-03-300x225.jpg 300w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-03.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-04-1024x768.jpg\" alt=\"DOM Structure - Dynamic Web Training\" class=\"wp-image-1421\" srcset=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-04-1024x768.jpg 1024w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-04-300x225.jpg 300w, https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/DOM-04.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Properties:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2022 Cookie: Returns value pairs of cookies in the document\n\u2022 documentMode: Returns mode of rendering used by the browser\n\u2022 domain: Returns the domain name\n\u2022 lastModified: Returns date &amp; time of last modification&nbsp;\n\u2022 title: Returns the title of the document\n\u2022 URL: Returns entire URL of the document<\/code><\/pre>\n\n\n\n<br>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Methods:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2022 close(): Closes the output stream opened using document.open()\n\u2022 getElementById(): Accesses the first element with specified id\n\u2022 getElementByName(): Accesses all the elements with the specified name\n\u2022 getElementByTagName():Accesses all elements with the specified Tag name\n\u2022 open(): Opens the output stream to input information using document.write()\n\u2022 write(): Writes HTML JavaScript code&nbsp;\n\u2022 writeIn(): Same as write() just adds a newline after each statement<\/code><\/pre>\n\n\n\n<br>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Examples:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html>\n&lt;head>\n    &lt;title> My Squad &lt;\/title>\n&lt;\/head>\n&lt;body>\n    The title of the document is:\n    &lt;script type=\u201dtext\/javascript\u201d>\n        document.write(document.title);\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<br>\n\n\n\n<h3 class=\"wp-block-heading\">DOM ELEMENTS:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"> While manipulating HTML documents we need to first find elements. There are few ways to do so:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2022 <strong>By ID:<\/strong><br> Suppose id =\u2019intro\u2019, example:<br> var myElement = document.getElementById(\u201cIntro\u201d);<br>\u2022 <strong>By TagName:<\/strong><br> Suppose tag=\u2019hello\u2019, example:<br> var buttons = document.getElementByTagName(\u2018hello\u2019);<br>\u2022 <strong>By ClassName:<\/strong><br> var myElement = document.getElementByClassName(\u2018stock\u2019);<br>\u2022 <strong>By CSS Selectors<\/strong>:<br> var resetElement = document.querySelector(\u2018#reset\u2019);<br>\u2022 <strong>By querySelectorAll():<\/strong><br> var myElements = document.querySelector(\u2018#elements\u2019);<br>\u2022 <strong>parentNode<\/strong><br>\u2022 <strong>firstElementChild<\/strong><br>\u2022 <strong>lastElementChild<\/strong><\/p>\n\n\n\n<br>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">DOM &amp; JavaScript work hand \u2013in-hand to form a perfect webpage. DOM uses hierarchical structure such as tree structure to meet up the requirements. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tree starts with a document as the \u201croot\u201d &amp; then subcategories are HTML elements. This system &amp; abstraction method helps you to access any HTML element, style sheet, etc. easily. DOM is a set of objects or elements in a hierarchical structure with an interface to access them. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are few more elements like link, area, image, applet, and anchor in DOM. However, the major ones are covered. So this was a short meaning of DOM &amp; how it works with elements. That\u2019s all!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript is an object-based scripting language developed by Netscape Communications. It\u2019s a light weighted language used for embedding interactivity in HTML webpages. And JS is an interpreted language, which means it\u2019s not precompiled before execution. Another important thing is the difference between Java &amp; JavaScript. Java was developed by Sun Microsystems. Whereas, JavaScript is not&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1621],"tags":[],"class_list":["post-1416","post","type-post","status-publish","format-standard","hentry","category-programming"],"yoast_head":"<title>Learn about DOM element in JavaScript and How does it work<\/title>\n<meta name=\"description\" content=\"View and Share Dynamic Web Training Blog Archives. This is a great source of articles and posts on Computer and IT training, tutorials and insights\" \/>\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.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a DOM element in JavaScript? How does it work?\" \/>\n<meta property=\"og:description\" content=\"DOM (Document Object Model) is an API that defines the structure of an HTML document and enables access to and modification of its elements.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript\" \/>\n<meta property=\"og:site_name\" content=\"Dynamic Web Training Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DynamicWebTraining\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DynamicWebTraining\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-18T23:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-14T04:08:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg\" \/>\n<meta name=\"author\" content=\"Dynamic Web Training\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dynamicwebtrain\" \/>\n<meta name=\"twitter:site\" content=\"@dynamicwebtrain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dynamic Web Training\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript\"},\"author\":{\"name\":\"Dynamic Web Training\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#\\\/schema\\\/person\\\/c94653aed4a6decc8e357af0a1082233\"},\"headline\":\"What is a DOM element in JavaScript? How does it work?\",\"datePublished\":\"2019-12-18T23:18:00+00:00\",\"dateModified\":\"2024-11-14T04:08:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript\"},\"wordCount\":626,\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg\",\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript\",\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript\",\"name\":\"Learn about DOM element in JavaScript and How does it work\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg\",\"datePublished\":\"2019-12-18T23:18:00+00:00\",\"dateModified\":\"2024-11-14T04:08:41+00:00\",\"description\":\"DOM (Document Object Model) is an API that defines the structure of an HTML document and enables access to and modification of its elements.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#primaryimage\",\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/What-is-a-DOM-element-in-Javascript-Feature.jpg\",\"contentUrl\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/What-is-a-DOM-element-in-Javascript-Feature.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/dom-element-in-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Training Blog\",\"item\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming\",\"item\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/category\\\/programming\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is a DOM element in JavaScript? How does it work?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/\",\"name\":\"Dynamic Web Training Blog\",\"description\":\"The Ultimate Training Experience.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#organization\",\"name\":\"Dynamic Web Training\",\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/logo.png\",\"width\":361,\"height\":109,\"caption\":\"Dynamic Web Training\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/DynamicWebTraining\\\/\",\"https:\\\/\\\/x.com\\\/dynamicwebtrain\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\\\/blog\\\/#\\\/schema\\\/person\\\/c94653aed4a6decc8e357af0a1082233\",\"name\":\"Dynamic Web Training\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g\",\"caption\":\"Dynamic Web Training\"},\"description\":\"Dynamic Web Training is Australia's leading provider of instructor led software training. We offer training courses in Adobe, Web Design, Graphic Design, Photoshop, InDesign, Dreamweaver and many more.\",\"sameAs\":[\"https:\\\/\\\/www.dynamicwebtraining.com.au\",\"https:\\\/\\\/www.facebook.com\\\/DynamicWebTraining\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/dynamic-web-training\",\"https:\\\/\\\/x.com\\\/dynamicwebtrain\"],\"url\":\"https:\\\/\\\/www.dynamicwebtraining.com.au\"}]}<\/script>","yoast_head_json":{"title":"Learn about DOM element in JavaScript and How does it work","description":"View and Share Dynamic Web Training Blog Archives. This is a great source of articles and posts on Computer and IT training, tutorials and insights","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.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript","og_locale":"en_US","og_type":"article","og_title":"What is a DOM element in JavaScript? How does it work?","og_description":"DOM (Document Object Model) is an API that defines the structure of an HTML document and enables access to and modification of its elements.","og_url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript","og_site_name":"Dynamic Web Training Blog","article_publisher":"https:\/\/www.facebook.com\/DynamicWebTraining\/","article_author":"https:\/\/www.facebook.com\/DynamicWebTraining\/","article_published_time":"2019-12-18T23:18:00+00:00","article_modified_time":"2024-11-14T04:08:41+00:00","og_image":[{"url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg","type":"","width":"","height":""}],"author":"Dynamic Web Training","twitter_card":"summary_large_image","twitter_creator":"@dynamicwebtrain","twitter_site":"@dynamicwebtrain","twitter_misc":{"Written by":"Dynamic Web Training","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#article","isPartOf":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript"},"author":{"name":"Dynamic Web Training","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#\/schema\/person\/c94653aed4a6decc8e357af0a1082233"},"headline":"What is a DOM element in JavaScript? How does it work?","datePublished":"2019-12-18T23:18:00+00:00","dateModified":"2024-11-14T04:08:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript"},"wordCount":626,"publisher":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#organization"},"image":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#primaryimage"},"thumbnailUrl":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg","articleSection":["Programming"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript","url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript","name":"Learn about DOM element in JavaScript and How does it work","isPartOf":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#primaryimage"},"image":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#primaryimage"},"thumbnailUrl":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature-1024x536.jpg","datePublished":"2019-12-18T23:18:00+00:00","dateModified":"2024-11-14T04:08:41+00:00","description":"DOM (Document Object Model) is an API that defines the structure of an HTML document and enables access to and modification of its elements.","breadcrumb":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#primaryimage","url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature.jpg","contentUrl":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/What-is-a-DOM-element-in-Javascript-Feature.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/dom-element-in-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Training Blog","item":"https:\/\/www.dynamicwebtraining.com.au\/blog\/"},{"@type":"ListItem","position":2,"name":"Programming","item":"https:\/\/www.dynamicwebtraining.com.au\/blog\/category\/programming"},{"@type":"ListItem","position":3,"name":"What is a DOM element in JavaScript? How does it work?"}]},{"@type":"WebSite","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#website","url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/","name":"Dynamic Web Training Blog","description":"The Ultimate Training Experience.","publisher":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dynamicwebtraining.com.au\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#organization","name":"Dynamic Web Training","url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2016\/02\/logo.png","contentUrl":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2016\/02\/logo.png","width":361,"height":109,"caption":"Dynamic Web Training"},"image":{"@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DynamicWebTraining\/","https:\/\/x.com\/dynamicwebtrain"]},{"@type":"Person","@id":"https:\/\/www.dynamicwebtraining.com.au\/blog\/#\/schema\/person\/c94653aed4a6decc8e357af0a1082233","name":"Dynamic Web Training","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0a14e92e62ad4eee0843f5cf7da3a00e1df4c9763922d4d20ba3ed2402a6896d?s=96&d=mm&r=g","caption":"Dynamic Web Training"},"description":"Dynamic Web Training is Australia's leading provider of instructor led software training. We offer training courses in Adobe, Web Design, Graphic Design, Photoshop, InDesign, Dreamweaver and many more.","sameAs":["https:\/\/www.dynamicwebtraining.com.au","https:\/\/www.facebook.com\/DynamicWebTraining\/","https:\/\/www.linkedin.com\/company\/dynamic-web-training","https:\/\/x.com\/dynamicwebtrain"],"url":"https:\/\/www.dynamicwebtraining.com.au"}]}},"_links":{"self":[{"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/posts\/1416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/comments?post=1416"}],"version-history":[{"count":6,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions"}],"predecessor-version":[{"id":1985,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/posts\/1416\/revisions\/1985"}],"wp:attachment":[{"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/media?parent=1416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/categories?post=1416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-json\/wp\/v2\/tags?post=1416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}