{"id":137,"date":"2022-11-02T11:45:36","date_gmt":"2022-11-02T11:45:36","guid":{"rendered":"https:\/\/devopssupport.in\/blog\/?p=137"},"modified":"2022-11-02T11:45:36","modified_gmt":"2022-11-02T11:45:36","slug":"targeting-methods-in-javascript-queryselector","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/targeting-methods-in-javascript-queryselector\/","title":{"rendered":"Targeting methods in Javascript (querySelector)"},"content":{"rendered":"\n<p>querySelector&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.querySelector(CSS Selector)<\/p>\n\n\n\n<p>querySelectorAll\u00a0 document.querySelectorAll(CSS Selector)<\/p>\n\n\n\n<p><strong>querySelector()<\/strong>\u00a0 <\/p>\n\n\n\n<p>The querySelector() method returns the first Element within the document that matches the specified selector, or group of selectors. It returns only first one code<\/p>\n\n\n\n<p>\u00a0If no matches are found, null is returned<\/p>\n\n\n\n<p>Example:-<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/AvinashKumar33\/64fe68671664e58ff2d33b547d10dcf4.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"180\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image.png\" alt=\"\" class=\"wp-image-138\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image.png 675w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image-300x80.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>querySelectorAll<\/strong>  <\/p>\n\n\n\n<p>The querySelectorAll() method in HTML is used to return the All element that matches a specified CSS selector(s) in the document. The querySelector() method only returns the first element that matches the specified selectors.\u00a0To return all the matches, use the querySelectorAll() method<\/p>\n\n\n\n<p>Example:-<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/AvinashKumar33\/ea35ecfcfc765457b7c2c26e46ce7841.js\"><\/script>\n\n\n\n<p>Output:-<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"738\" height=\"282\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image-1.png\" alt=\"\" class=\"wp-image-140\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image-1.png 738w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/11\/image-1-300x115.png 300w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>querySelector&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.querySelector(CSS Selector) querySelectorAll\u00a0 document.querySelectorAll(CSS Selector) querySelector()\u00a0 The querySelector() method returns the first Element within the document that matches the specified selector, or group of selectors. It&#8230; <\/p>\n","protected":false},"author":2,"featured_media":143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[45,50,52,53,54,55],"class_list":["post-137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-javascript","tag-javascript-methods","tag-js","tag-queryselector","tag-queryselectorall","tag-targeting-method"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":2,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions\/144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media\/143"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}