{"id":7496,"date":"2021-08-06T13:21:20","date_gmt":"2021-08-06T13:21:20","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7496"},"modified":"2022-04-13T16:30:46","modified_gmt":"2022-04-13T16:30:46","slug":"how-do-i-manipulate-css-with-javascript","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/","title":{"rendered":"How to Use CSS Selector in javascript?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">querySelector(\u201cCSS Selector\u201d)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The method querySelector() returns the first Element match of the specified selector or group of selectors. If no matches are found, null is returned.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/7b6dcc12059a06ca91a7a198abbb33b8.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">querySelectorAll(\u201cCSS Selector\u201d)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The method querySelectorAll() returns a static (not live) NodeList representing a list of the document&#8217;s elements that match the specified group of selectors.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.<\/li><li>You can use the length property of the NodeList object to determine the number of elements that matches the specified selector, then you can loop through all elements and extract the info you want.<\/li><li>If the specified selectors include a CSS pseudo-element, the returned list is always empty.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">querySelectorAll(\u201cCSS Selector\u201d)<\/h2>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/3b8463fa85c1e0627333fe6b9fb14982.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">querySelectorAll(\u201cCSS Selector\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\/02371374e63bdae9c7b62b6b9222cd59.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">querySelectorAll(\u201cCSS Selector\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\/8ea435f4ad00cc6a95237ee6de1044af.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\/3d60ff3937c269ab4f754fceace8032b.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">innerHTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The innerHTML property defines the HTML content.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/fefebf38d0413f8fea6bfbf65276af1e.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>querySelector(\u201cCSS Selector\u201d) The method querySelector() returns the first Element match of the specified selector or group of selectors. If no [&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":[5134,5095,4240,1543],"class_list":["post-7496","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-css","tag-javascript","tag-method","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 Use CSS Selector in 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-do-i-manipulate-css-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use CSS Selector in javascript? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"querySelector(\u201cCSS Selector\u201d) The method querySelector() returns the first Element match of the specified selector or group of selectors. If no [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-06T13:21:20+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How to Use CSS Selector in javascript?\",\"datePublished\":\"2021-08-06T13:21:20+00:00\",\"dateModified\":\"2022-04-13T16:30:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/\"},\"wordCount\":151,\"commentCount\":0,\"keywords\":[\"css\",\"Javascript\",\"Method\",\"Node\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/\",\"name\":\"How to Use CSS Selector in javascript? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"datePublished\":\"2021-08-06T13:21:20+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-do-i-manipulate-css-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-do-i-manipulate-css-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use CSS Selector in 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 Use CSS Selector in 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-do-i-manipulate-css-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Use CSS Selector in javascript? - scmGalaxy","og_description":"querySelector(\u201cCSS Selector\u201d) The method querySelector() returns the first Element match of the specified selector or group of selectors. If no [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/","og_site_name":"scmGalaxy","article_published_time":"2021-08-06T13:21:20+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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How to Use CSS Selector in javascript?","datePublished":"2021-08-06T13:21:20+00:00","dateModified":"2022-04-13T16:30:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/"},"wordCount":151,"commentCount":0,"keywords":["css","Javascript","Method","Node"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/","name":"How to Use CSS Selector in javascript? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"datePublished":"2021-08-06T13:21:20+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-do-i-manipulate-css-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-do-i-manipulate-css-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How to Use CSS Selector in 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\/7496","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=7496"}],"version-history":[{"count":3,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7496\/revisions"}],"predecessor-version":[{"id":7735,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7496\/revisions\/7735"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}