{"id":7489,"date":"2021-08-06T12:24:59","date_gmt":"2021-08-06T12:24:59","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7489"},"modified":"2022-04-13T16:30:46","modified_gmt":"2022-04-13T16:30:46","slug":"how-to-access-an-element-in-html-dom-using-javascript","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/","title":{"rendered":"How to Access an Element in HTML DOM using JavaScript?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Element Access Methods<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Method<\/strong><\/td><td><strong>Description<\/strong><\/td><\/tr><tr><td>document.getElementById(\u201cID\u201d)<\/td><td>Get the element with the specified ID<\/td><\/tr><tr><td>document.getElementsByTagName(\u201cTag_Name&#8221;);<\/td><td>Get all the specified element by the Tag Name<\/td><\/tr><tr><td>document.getElementsByClassName(\u201cClass_Name&#8221;);<\/td><td>Get all the specified element by the Class Name<\/td><\/tr><tr><td>document.querySelector(\u201cCSS_Selector&#8221;);<\/td><td>It returns the first match of the passed selector string<\/td><\/tr><tr><td>document.querySelectorAll(&#8220;CSS_Selector&#8221;);<\/td><td>It returns a node list of DOM elements that match the query<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">getElementById(\u201cID_Name\u201d)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The method get<strong>E<\/strong>lement<strong>B<\/strong>y<strong>I<\/strong>d(\u201cID_Name\u201d) returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they&#8217;re a useful way to get access to a specific element quickly.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/6ddcfb35441e7833bc9eab2905a0f20c.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByTagName(\u201cTag_Name\u201d)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The method get<strong>E<\/strong>lements<strong>B<\/strong>y<strong>T<\/strong>ag<strong>N<\/strong>ame(\u201cTag_Name\u201d) returns a live node list meaning that it updates itself with the DOM tree automatically, so modification of the DOM tree will be reflected in the returned collection. The returned Node List or Collection of Nodes can be accessed by index numbers starting with index 0.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>This method accepts a string indicating the type of elements that be retrieved, a special value \u201c * \u201d returns all elements in the documents.<\/li><li>You can use the length property of the NodeList object to determine the number of elements with the specified tag name, then you can loop through all elements and extract the info you want.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByTagName(\u201cTag_Name\u201d)<\/h2>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/c4ec9fdfd468eda0c547fd9a74fb7aa4.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByTagName(\u201cTag_Name\u201d)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>More specific<\/strong><\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/beb049b4674e759296a1962317363db1.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByTagName(\u201cTag_Name\u201d)<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Length Property<\/strong><\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/3e235b9c309b2478a78618493f8ca8f9.js\"><\/script>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Loop<\/strong><\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/cd7e6ac24025066061affc0d6f8954f2.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByClassName(\u201cClass_Name\u201d)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Method getElementsByClassName() returns a live node list meaning that it updates itself with the DOM tree automatically, so modification of the DOM tree will be reflected in the returned collection. The returned Node List or Collection of Nodes can be accessed by index numbers starting with index 0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2022This method accepts string indicating the class name of elements that be retrieved \u2022<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can also pass multiple class name. For matching, all the class names should match. \u2022You can use the length property of the NodeList object to determine the number of elements with the specified class name, then you can loop through all elements and extract the info you want.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>This method accepts string indicating the class name of elements that be retrieved<\/li><li>We can also pass multiple class name. For matching, all the class name should match.<\/li><li>You can use the length property of the NodeList object to determine the number of elements with the specified class name, then you can loop through all elements and extract the info you want.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByClassName(\u201cClass_Name\u201d)<\/h2>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/fb2f06c98a6b2dc004f159ba5b0ccd25.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByClassName(\u201cClass_Name\u201d)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>More specific<\/strong><\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/9014d51e812d909c9fd5fe8746735365.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">getElementsByClassName(\u201cClass_Name\u201d)<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Length Property<\/strong><\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/efc998b6f18351389c90af5f074475aa.js\"><\/script>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Loop<\/strong><\/li><\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/617c5755e99b6cf7272ee4cd5a79b905.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Element Access Methods Method Description document.getElementById(\u201cID\u201d) Get the element with the specified ID document.getElementsByTagName(\u201cTag_Name&#8221;); Get all the specified element by [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[16],"tags":[6004,4459,5095,1543],"class_list":["post-7489","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-element-access-methods","tag-html","tag-javascript","tag-node"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Access an Element in HTML DOM using JavaScript? - scmGalaxy<\/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.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Access an Element in HTML DOM using JavaScript? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"Element Access Methods Method Description document.getElementById(\u201cID\u201d) Get the element with the specified ID document.getElementsByTagName(\u201cTag_Name&#8221;); Get all the specified element by [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-06T12:24:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:30:46+00:00\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How to Access an Element in HTML DOM using JavaScript?\",\"datePublished\":\"2021-08-06T12:24:59+00:00\",\"dateModified\":\"2022-04-13T16:30:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/\"},\"wordCount\":438,\"commentCount\":0,\"keywords\":[\"Element Access Methods\",\"HTML\",\"Javascript\",\"Node\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/\",\"name\":\"How to Access an Element in HTML DOM using JavaScript? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"datePublished\":\"2021-08-06T12:24:59+00:00\",\"dateModified\":\"2022-04-13T16:30:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-access-an-element-in-html-dom-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Access an Element in HTML DOM using JavaScript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Access an Element in HTML DOM using JavaScript? - scmGalaxy","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.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Access an Element in HTML DOM using JavaScript? - scmGalaxy","og_description":"Element Access Methods Method Description document.getElementById(\u201cID\u201d) Get the element with the specified ID document.getElementsByTagName(\u201cTag_Name&#8221;); Get all the specified element by [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/","og_site_name":"scmGalaxy","article_published_time":"2021-08-06T12:24:59+00:00","article_modified_time":"2022-04-13T16:30:46+00:00","author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How to Access an Element in HTML DOM using JavaScript?","datePublished":"2021-08-06T12:24:59+00:00","dateModified":"2022-04-13T16:30:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/"},"wordCount":438,"commentCount":0,"keywords":["Element Access Methods","HTML","Javascript","Node"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/","name":"How to Access an Element in HTML DOM using JavaScript? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"datePublished":"2021-08-06T12:24:59+00:00","dateModified":"2022-04-13T16:30:46+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-access-an-element-in-html-dom-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How to Access an Element in HTML DOM using JavaScript?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7489"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7489\/revisions"}],"predecessor-version":[{"id":7495,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7489\/revisions\/7495"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}