{"id":19081,"date":"2020-07-06T16:46:43","date_gmt":"2020-07-06T23:46:43","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19081"},"modified":"2023-12-01T03:38:47","modified_gmt":"2023-12-01T11:38:47","slug":"javascript-getelementbyidv","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/","title":{"rendered":"How to Use JavaScript\u2019s getElementById Getter"},"content":{"rendered":"\n

So, you want to select an element on a web page in JavaScript? That’s the specialty of the getElementById<\/code> method, the so-called king of the element getters<\/code> in JavaScript.
<\/p>\n\n\n\n

getElementById<\/code> allows you to select an element based on its ID. It\u2019s quite a self-explanatory method name when you think about it.
<\/p>\n\n\n\n

In this guide, we\u2019re going to talk about what getElementById<\/code> is, how it works, and when you should use it in your code. We\u2019ll walk through an example of a \u201cShow\/hide\u201d text button in our document.getElementById demo.
<\/p>\n\n\n\n

Let\u2019s dive in!<\/p>\n\n\n\n

What is getElementById?<\/h2>\n\n\n\n

getElementById()<\/code> is a Document method that selects an element from the HTML DOM on a page based on the element ID attribute that you have specified.
<\/p>\n\n\n\n

Consider the following code:
<\/p>\n\n\n\n

index.html\n<button id=\"mainButton\">This is a button!<\/button>\nscripts.js\nconst button = document.getElementById(\"mainButton\");<\/pre><\/div>\n\n\n\n
In our HTML code, we\u2019ve defined a <button><\/code> element which has the ID mainButton<\/code>. Our JavaScript code will retrieve this component using the getElementById()<\/code> method.
<\/p>\n\n\n\n
This method is useful if you want to retrieve a single element on a page. If you think back to learning HTML and CSS, you\u2019ll know that IDs have to be unique. This makes getElementById()<\/code> perfect for retrieving single elements.
<\/p>\n\n\n\n
You may opt to use this method if you\u2019ve assigned an ID to an element. Instead of using a broader getter<\/code> like querySelector<\/code> or getElementByClass<\/code>, which returns the first element object that meets a particular criteria, you can retrieve an element using getElementById()<\/code>.
<\/p>\n\n\n\n
getElementById()<\/code> is a common method used to retrieve an item on a web page. <\/p>\n\n\n\n
What You Need to Know About getElementById<\/h2>\n\n\n\n
Before we delve into an example, we\u2019re going to talk about the mistakes that beginners often make when using this method.
<\/p>\n\n\n\n
It\u2019s always frustrating when you are learning something new and it doesn\u2019t work, so let\u2019s chat about what common errors you may make while you\u2019re getting the hang of getElementById()<\/code>.
<\/p>\n\n\n\n
First, getElementById()<\/code> is case sensitive. While the term ID<\/code> is usually capitalized in programming, you need to use the camel case Id<\/code> when you\u2019re using this method. Otherwise, this method will not work.
<\/p>\n\n\n\n
Second, the ID that you specify should not include a pound sign (hashtag). Consider this code:
<\/p>\n\n\n\n
const button = document.getElementById(\"#mainButton\");<\/pre><\/div>\n\n\n\n
This example may look like it will retrieve the element with the ID mainButton<\/code>, but that\u2019s not the case. You should only specify the ID of the element you want to retrieve:
<\/p>\n\n\n\n
const button = document.getElementById(\"mainButton\");<\/pre><\/div>\n\n\n\n
Now that\u2019s out of the way, we can go through an example.<\/p>\n\n\n\n
How to Use getElementById<\/h2>\n\n\n\n
When you\u2019re browsing the web, you may encounter tags that say \u201cRead more\u201d. A web page may show a few sentences of a piece of text, and then ask you to press that button so that you can see the rest of the text.
<\/p>\n\n\n\n
We\u2019re going to build that feature using the getElementById()<\/code> getter. You can view the final code for this tutorial on GitHub<\/a>.<\/p>\n\n\n\n
Creating the Front-End<\/h3>\n\n\n\n
Let\u2019s get started by creating a simple front-end using HTML and CSS. Create a new file called index.html and paste in the following code:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n   \t <title>An Introduction to getElementById()<\/title>\n   \t <link rel=\"stylesheet\" href=\"styles.css\" \/>\n    <\/head>\n    <body>\n   \t <div>\n   \t\t <h1>JavaScript getElementById()<\/h1>\n   \t\t <p>Are you looking to learn more about getElementById()? You've come to the right place.<\/p>\n   \t\t <span id=\"showMore\">Read more<\/span>\n   \t\t <p id=\"hiddenText\">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a \"getter\" because it \"gets\" an element from a page.<\/p>\n   \t <\/div>\n    <\/body>\n    <script src=\"scripts.js\"><\/script>\n<\/html><\/pre><\/div>\n\n\n\n
In this document, we\u2019ve defined a box which contains information about the getElementById()<\/code> method. Our box contains a title, two paragraphs of text, and a span HTML tag that we will use to reveal the last paragraph.
<\/p>\n\n\n\n
Open up a file called styles.css and paste in this code:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n   \t <title>An Introduction to getElementById()<\/title>\n   \t <link rel=\"stylesheet\" href=\"styles.css\" \/>\n    <\/head>\n    <body>\n   \t <div>\n   \t\t <h1>JavaScript getElementById()<\/h1>\n   \t\t <p>Are you looking to learn more about getElementById()? You've come to the right place.<\/p>\n   \t\t <span id=\"showMore\">Read more<\/span>\n   \t\t <p id=\"hiddenText\">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a \"getter\" because it \"gets\" an element from a page.<\/p>\n   \t <\/div>\n    <\/body>\n    <script src=\"scripts.js\"><\/script>\n<\/html><\/pre><\/div>\n\n\n\n
This code gives our page some color to make it more visually appealing. When you open up the web page, you\u2019ll see the following:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
There\u2019s one problem: our \u201cRead more\u201d tag does nothing, and our last paragraph of text is still visible. That\u2019s because we have not yet added in our JavaScript code. Let\u2019s write the JavaScript functionality for our web page.<\/p>\n\n\n\n
Adding JavaScript Code<\/h3>\n\n\n\n
Let\u2019s start by selecting the elements with which we are going to be working. The elements we need to select are our <span><\/code> tag (which contains our \u201cRead more\u201d text), and the paragraph that we want to toggle between showing and hiding.
<\/p>\n\n\n\n
Create a file called scripts.js and paste in this code:
<\/p>\n\n\n\n
var paragraph = document.getElementById(\"hiddenText\");\nparagraph.style.display = \"none\";\n<\/pre><\/div>\n\n\n\n
In our code, we\u2019ve used getElementById()<\/code> to retrieve our paragraph from the DOM document. selects the hiddenText document object and hides it. Next, we\u2019ll create a function that toggles our text:
<\/p>\n\n\n\n
function toggleText() {\n\tif (paragraph.style.display === \"none\") {\n\t\tparagraph.style.display = \"block\";\n\t} else {\n\t\tparagraph.style.display = \"none\";\n\t}\n}<\/pre><\/div>\n\n\n\n
We\u2019ve started by selecting the element with the ID hiddenText<\/code>. This refers to the paragraph of text that we want to appear or disappear when \u201cRead more\u201d is clicked.
<\/p>\n\n\n\n
We\u2019ve written an if<\/code> statement which checks whether that paragraph is visible. If it is not visible,  the display<\/code> value of the paragraph will be set to block<\/code>, which will make it appear; otherwise, the paragraph’s display<\/code> value will be set to none<\/code>, and so it will disappear.
<\/p>\n\n\n\n
Our code isn\u2019t finished yet. Next, we\u2019re going to create en event listener which will activate when we click on our \u201cRead more\u201d text:
<\/p>\n\n\n\n
var showButton = document.getElementById(\"showMore\");\nshowButton.addEventListener(\"click\", toggleText);<\/pre><\/div>\n\n\n\n
This code selects the Read more<\/code> text on our page. It then sets up an event listener which will trigger our toggleText()<\/code> method when the \u201cRead more\u201d text is clicked.
<\/p>\n\n\n\n
Now, let\u2019s open up our web page and try to click on the Read more<\/code> text:
<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Our code is functional! When you click on the \u201cRead more\u201d text, the text appears. When you click on it again, the text disappears.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
The getElementById()<\/code> getter allows you to retrieve an element based on its ID from a web page.
<\/p>\n\n\n\n
Are you looking for a challenge? Use the getElementById()<\/code> getter to change the value of \u201cRead more\u201d to \u201cRead less\u201d when the text is visible. To go further, you could add a few images to the page and create a button which hides all those images when the button is clicked.
<\/p>\n\n\n\n
Now you\u2019re ready to start using the getElementById()<\/code> getter like a professional coder!<\/p>\n","protected":false},"excerpt":{"rendered":"So, you want to select an element on a web page in JavaScript? That's the specialty of the getElementById method, the so-called king of the element getters in JavaScript. getElementById allows you to select an element based on its ID. It\u2019s quite a self-explanatory method name when you think about it. In this guide, we\u2019re…","protected":false},"author":240,"featured_media":14366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-19081","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to Use JavaScript\u2019s getElementById Getter | Career Karma<\/title>\n<meta name=\"description\" content=\"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use JavaScript\u2019s getElementById Getter\" \/>\n<meta property=\"og:description\" content=\"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-06T23:46:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:38:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Use JavaScript\u2019s getElementById Getter\",\"datePublished\":\"2020-07-06T23:46:43+00:00\",\"dateModified\":\"2023-12-01T11:38:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/\"},\"wordCount\":953,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/\",\"name\":\"How to Use JavaScript\u2019s getElementById Getter | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg\",\"datePublished\":\"2020-07-06T23:46:43+00:00\",\"dateModified\":\"2023-12-01T11:38:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"MacBook Pro displaying computer language codes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-getelementbyidv\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use JavaScript\u2019s getElementById Getter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use JavaScript\u2019s getElementById Getter | Career Karma","description":"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.","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:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/","og_locale":"en_US","og_type":"article","og_title":"How to Use JavaScript\u2019s getElementById Getter","og_description":"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-06T23:46:43+00:00","article_modified_time":"2023-12-01T11:38:47+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Use JavaScript\u2019s getElementById Getter","datePublished":"2020-07-06T23:46:43+00:00","dateModified":"2023-12-01T11:38:47+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/"},"wordCount":953,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/","url":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/","name":"How to Use JavaScript\u2019s getElementById Getter | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg","datePublished":"2020-07-06T23:46:43+00:00","dateModified":"2023-12-01T11:38:47+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"getElementById allows you to retrieve an element from a web page based on its assigned ID. On Career Karma, learn how to use this method in your JavaScript code.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/caspar-camille-rubin-fPkvU7RDmCo-unsplash.jpg","width":1020,"height":680,"caption":"MacBook Pro displaying computer language codes"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Use JavaScript\u2019s getElementById Getter"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19081"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19081\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14366"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}