{"id":13781,"date":"2022-10-05T08:46:36","date_gmt":"2022-10-05T03:16:36","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/"},"modified":"2022-10-05T08:46:36","modified_gmt":"2022-10-05T03:16:36","slug":"solved-what-do-queryselectorall-and-getelementsby-methods-return-2","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/","title":{"rendered":"[Solved] What do querySelectorAll and getElementsBy* methods return?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Your getElementById<\/code><\/a> code works since IDs have to be unique and thus the function always returns exactly one element (or null<\/code> if none was found).<\/p>\n

However, the methods
\ngetElementsByClassName<\/code><\/a>,
\ngetElementsByName<\/code><\/a>,
\ngetElementsByTagName<\/code><\/a>, and
\ngetElementsByTagNameNS<\/code><\/a>
\nreturn an iterable collection of elements.<\/p>\n

The method names provide the hint: getElement<\/code> implies singular<\/em>, whereas getElements<\/code> implies plural<\/em>.<\/p>\n

The method querySelector<\/code><\/a> also returns a single element, and querySelectorAll<\/code><\/a> returns an iterable collection.<\/p>\n

The iterable collection can either be a NodeList<\/code><\/a> or an HTMLCollection<\/code><\/a>.<\/p>\n

getElementsByName<\/code><\/a> and querySelectorAll<\/code><\/a> are both specified to return a NodeList<\/code>; the other getElementsBy*<\/code> methods<\/a> are specified to return an HTMLCollection<\/code>, but please note that some browser versions implement this differently.<\/p>\n

Both of these collection types don\u2019t offer the same properties that Elements, Nodes, or similar types offer; that\u2019s why reading style<\/code> off of document.getElements<\/code>\u2026(<\/code>\u2026)<\/code> fails.
\nIn other words: a NodeList<\/code> or an HTMLCollection<\/code> doesn\u2019t have a style<\/code>; only an Element<\/code> has a style<\/code>.<\/p>\n

\n

These \u201carray-like\u201d collections are lists that contain zero or more elements, which you need to iterate over, in order to access them.
\nWhile you can iterate over them similarly to an array, note that they are different<\/em> from Array<\/code>s<\/a>.<\/p>\n

In modern browsers, you can convert these iterables to a proper Array with Array.from<\/code><\/a>; then you can use forEach<\/code> and other Array methods, e.g. iteration methods<\/a>:<\/p>\n

Array.from(document.getElementsByClassName(\"myElement\"))\n  .forEach((element) => element.style.size = \"100px\");\n<\/code><\/pre>\n
In old browsers that don\u2019t support Array.from<\/code> or the iteration methods, you can still use Array.prototype.slice.call<\/code>.
\nThen you can iterate over it like you would with a real array:<\/p>\n
var elements = Array.prototype.slice\n    .call(document.getElementsByClassName(\"myElement\"));\n\nfor(var i = 0; i < elements.length; ++i){\n  elements[i].style.size = \"100px\";\n}\n<\/code><\/pre>\n
You can also iterate over the NodeList<\/code> or HTMLCollection<\/code> itself, but be aware that in most circumstances, these collections are live<\/em> (MDN docs<\/a>, DOM spec<\/a>), i.e. they are updated as the DOM changes.
\nSo if you insert or remove elements as you loop, make sure to not accidentally skip over some elements or create an infinite loop.
\nMDN documentation should always note if a method returns a live collection or a static one.<\/p>\n
For example, a NodeList<\/code> offers some iteration methods such as forEach<\/code> in modern browsers:<\/p>\n
document.querySelectorAll(\".myElement\")\n  .forEach((element) => element.style.size = \"100px\");\n<\/code><\/pre>\n
A simple for<\/code> loop can also be used:<\/p>\n
var elements = document.getElementsByClassName(\"myElement\");\n\nfor(var i = 0; i < elements.length; ++i){\n  elements[i].style.size = \"100px\";\n}\n<\/code><\/pre>\n
Aside: .childNodes<\/code><\/a> yields a live<\/em> NodeList<\/code> and .children<\/code><\/a> yields a live<\/em> HTMLCollection<\/code>, so these two getters also need to be handled carefully.<\/p>\n
\n
There are some libraries like jQuery<\/a> which make DOM querying a bit shorter and create a layer of abstraction over \u201cone element\u201d and \u201ca collection of elements\u201d:<\/p>\n
$(\".myElement\").css(\"size\", \"100px\");\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            6<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved What do querySelectorAll and getElementsBy* methods return? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Your getElementById code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found). However, the methods getElementsByClassName, getElementsByName, getElementsByTagName, and getElementsByTagNameNS return an iterable collection of elements. The method names provide the hint: getElement implies singular, whereas getElements implies plural. The method … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[2531,2530,333],"class_list":["post-13781","post","type-post","status-publish","format-standard","hentry","category-solved","tag-dom-traversal","tag-getelementsbyclassname","tag-javascript"],"yoast_head":"\n[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb<\/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:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Your getElementById code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found). However, the methods getElementsByClassName, getElementsByName, getElementsByTagName, and getElementsByTagNameNS return an iterable collection of elements. The method names provide the hint: getElement implies singular, whereas getElements implies plural. The method ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-05T03:16:36+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\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:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] What do querySelectorAll and getElementsBy* methods return?\",\"datePublished\":\"2022-10-05T03:16:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\"},\"wordCount\":375,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"dom-traversal\",\"getelementsbyclassname\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\",\"name\":\"[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-05T03:16:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] What do querySelectorAll and getElementsBy* methods return?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb","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:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb","og_description":"[ad_1] Your getElementById code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found). However, the methods getElementsByClassName, getElementsByName, getElementsByTagName, and getElementsByTagNameNS return an iterable collection of elements. The method names provide the hint: getElement implies singular, whereas getElements implies plural. The method ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/","og_site_name":"JassWeb","article_published_time":"2022-10-05T03:16:36+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] What do querySelectorAll and getElementsBy* methods return?","datePublished":"2022-10-05T03:16:36+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/"},"wordCount":375,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["dom-traversal","getelementsbyclassname","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/","url":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/","name":"[Solved] What do querySelectorAll and getElementsBy* methods return? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-05T03:16:36+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-what-do-queryselectorall-and-getelementsby-methods-return-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] What do querySelectorAll and getElementsBy* methods return?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/13781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=13781"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/13781\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=13781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=13781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=13781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}