{"id":69159,"date":"2024-10-14T22:18:33","date_gmt":"2024-10-14T22:18:33","guid":{"rendered":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/"},"modified":"2024-10-14T22:18:33","modified_gmt":"2024-10-14T22:18:33","slug":"javascript-and-the-dom-5-select-element-by-class-name","status":"publish","type":"post","link":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/","title":{"rendered":"JavaScript and the DOM #5 &#8211; Select element by class name"},"content":{"rendered":"<div class=\"youtubomatic-video-container\"><iframe loading=\"lazy\" width=\"580\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/qxc4vfE2mX8?autoplay=1&#038;controls=1&#038;hl=en\" frameborder=\"0\" allowfullscreen><\/iframe><\/div>\n<p>Introduction:<br \/>\n&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br \/>\nLearn how to select elements by class name, loop through them using a for&#8230;of loop, and apply styles using JavaScript. This quick tutorial is perfect for beginners looking to enhance their web development skills by manipulating DOM elements and changing their appearance dynamically. Make your JavaScript more interactive with just a few lines of code!<\/p>\n<p>Useful Links:<br \/>\n&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>\nText Editor &#8211; <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/code.visualstudio.com\/<\/a><br \/>\nBrowser &#8211; <a href=\"https:\/\/www.google.com\/chrome\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.google.com\/chrome\/<\/a><br \/>\nGitHub &#8211; <a href=\"https:\/\/github.com\/bibeva\/JavaScript-and-the-DOM\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/bibeva\/JavaScript-and-the-DOM<\/a><\/p>\n<p>Gadgets I use for recording:<br \/>\n&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>\nLaptop &#8211; <a href=\"https:\/\/amzn.to\/3gv7sER\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3gv7sER<\/a><br \/>\nMonitor &#8211; <a href=\"https:\/\/amzn.to\/3F3nZZU\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3F3nZZU<\/a><br \/>\nMic &#8211; <a href=\"https:\/\/amzn.to\/3XywvXX\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3XywvXX<\/a><br \/>\nHeadphone &#8211; <a href=\"https:\/\/amzn.to\/3OEZ56g\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3OEZ56g<\/a><br \/>\nKeyboard &#038; Mouse &#8211; <a href=\"https:\/\/amzn.to\/3AGAJTx\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3AGAJTx<\/a><br \/>\nScreen Recorder &#8211; <a href=\"https:\/\/amzn.to\/3Ew6H64\" target=\"_blank\" rel=\"noopener\">https:\/\/amzn.to\/3Ew6H64<\/a><\/p>\n<p>Buy me Coffee:<br \/>\n&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>\n<a href=\"https:\/\/buymeacoffee.com\/codewithbibek\" target=\"_blank\" rel=\"noopener\">https:\/\/buymeacoffee.com\/codewithbibek<\/a><\/p>\n<p>#documentobjectmodel #dom #javascriptdom<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; Learn how to select elements by class name, loop through them using a for&#8230;of loop, and apply styles using JavaScript. This quick tutorial is perfect for beginners looking to enhance their web development skills by manipulating DOM elements and changing their appearance dynamically. Make your JavaScript more interactive with just a few lines of code! Useful Links: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; Text Editor &#8211; https:\/\/code.visualstudio.com\/ Browser &#8211; https:\/\/www.google.com\/chrome\/ GitHub &#8211; https:\/\/github.com\/bibeva\/JavaScript-and-the-DOM&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-69159","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript and the DOM #5 - Select element by class name - UshopWell.com<\/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:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript and the DOM #5 - Select element by class name - UshopWell.com\" \/>\n<meta property=\"og:description\" content=\"Introduction: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; Learn how to select elements by class name, loop through them using a for&#8230;of loop, and apply styles using JavaScript. This quick tutorial is perfect for beginners looking to enhance their web development skills by manipulating DOM elements and changing their appearance dynamically. Make your JavaScript more interactive with just a few lines of code! Useful Links: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; Text Editor &#8211; https:\/\/code.visualstudio.com\/ Browser &#8211; https:\/\/www.google.com\/chrome\/ GitHub &#8211; https:\/\/github.com\/bibeva\/JavaScript-and-the-DOM...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/\" \/>\n<meta property=\"og:site_name\" content=\"UshopWell.com\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T22:18:33+00:00\" \/>\n<meta name=\"author\" content=\"UShopWell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UShopWell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/\"},\"author\":{\"name\":\"UShopWell\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#\\\/schema\\\/person\\\/6fd1f9e0ff932e534c86c70d5acff0fc\"},\"headline\":\"JavaScript and the DOM #5 &#8211; Select element by class name\",\"datePublished\":\"2024-10-14T22:18:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/\"},\"wordCount\":151,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/\",\"url\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/\",\"name\":\"JavaScript and the DOM #5 - Select element by class name - UshopWell.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#website\"},\"datePublished\":\"2024-10-14T22:18:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/javascript-and-the-dom-5-select-element-by-class-name\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript and the DOM #5 &#8211; Select element by class name\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#website\",\"url\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/\",\"name\":\"UshopWell.com\",\"description\":\"The Premiere Online Marketplace\",\"publisher\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#organization\",\"name\":\"UshopWell\",\"url\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/pandaSwea.png\",\"contentUrl\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/pandaSwea.png\",\"width\":365,\"height\":359,\"caption\":\"UshopWell\"},\"image\":{\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/#\\\/schema\\\/person\\\/6fd1f9e0ff932e534c86c70d5acff0fc\",\"name\":\"UShopWell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g\",\"caption\":\"UShopWell\"},\"url\":\"https:\\\/\\\/ushopwell.com\\\/ublog\\\/author\\\/kburnettu\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript and the DOM #5 - Select element by class name - UshopWell.com","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:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript and the DOM #5 - Select element by class name - UshopWell.com","og_description":"Introduction: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; Learn how to select elements by class name, loop through them using a for&#8230;of loop, and apply styles using JavaScript. This quick tutorial is perfect for beginners looking to enhance their web development skills by manipulating DOM elements and changing their appearance dynamically. Make your JavaScript more interactive with just a few lines of code! Useful Links: &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; Text Editor &#8211; https:\/\/code.visualstudio.com\/ Browser &#8211; https:\/\/www.google.com\/chrome\/ GitHub &#8211; https:\/\/github.com\/bibeva\/JavaScript-and-the-DOM...","og_url":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/","og_site_name":"UshopWell.com","article_published_time":"2024-10-14T22:18:33+00:00","author":"UShopWell","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UShopWell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/#article","isPartOf":{"@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/"},"author":{"name":"UShopWell","@id":"https:\/\/ushopwell.com\/ublog\/#\/schema\/person\/6fd1f9e0ff932e534c86c70d5acff0fc"},"headline":"JavaScript and the DOM #5 &#8211; Select element by class name","datePublished":"2024-10-14T22:18:33+00:00","mainEntityOfPage":{"@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/"},"wordCount":151,"commentCount":0,"publisher":{"@id":"https:\/\/ushopwell.com\/ublog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/","url":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/","name":"JavaScript and the DOM #5 - Select element by class name - UshopWell.com","isPartOf":{"@id":"https:\/\/ushopwell.com\/ublog\/#website"},"datePublished":"2024-10-14T22:18:33+00:00","breadcrumb":{"@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ushopwell.com\/ublog\/javascript-and-the-dom-5-select-element-by-class-name\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ushopwell.com\/ublog\/"},{"@type":"ListItem","position":2,"name":"JavaScript and the DOM #5 &#8211; Select element by class name"}]},{"@type":"WebSite","@id":"https:\/\/ushopwell.com\/ublog\/#website","url":"https:\/\/ushopwell.com\/ublog\/","name":"UshopWell.com","description":"The Premiere Online Marketplace","publisher":{"@id":"https:\/\/ushopwell.com\/ublog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ushopwell.com\/ublog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ushopwell.com\/ublog\/#organization","name":"UshopWell","url":"https:\/\/ushopwell.com\/ublog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ushopwell.com\/ublog\/#\/schema\/logo\/image\/","url":"https:\/\/ushopwell.com\/ublog\/wp-content\/uploads\/2018\/01\/pandaSwea.png","contentUrl":"https:\/\/ushopwell.com\/ublog\/wp-content\/uploads\/2018\/01\/pandaSwea.png","width":365,"height":359,"caption":"UshopWell"},"image":{"@id":"https:\/\/ushopwell.com\/ublog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/ushopwell.com\/ublog\/#\/schema\/person\/6fd1f9e0ff932e534c86c70d5acff0fc","name":"UShopWell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4adb372cadd43b4d4c57964dab95b0f69618bf960d131c4acf49d96d6bbc9c6e?s=96&d=mm&r=g","caption":"UShopWell"},"url":"https:\/\/ushopwell.com\/ublog\/author\/kburnettu\/"}]}},"_links":{"self":[{"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/posts\/69159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/comments?post=69159"}],"version-history":[{"count":0,"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/posts\/69159\/revisions"}],"wp:attachment":[{"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/media?parent=69159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/categories?post=69159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ushopwell.com\/ublog\/wp-json\/wp\/v2\/tags?post=69159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}