From 4ad2ce84d35105cdfc6e829e30e0d0db1b418beb Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Thu, 6 Aug 2020 12:12:47 -0500 Subject: [PATCH] Add Turn An HTMLCollection Into An Array as a javascript til --- README.md | 3 ++- .../turn-an-html-collection-into-an-array.md | 25 +++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 javascript/turn-an-html-collection-into-an-array.md diff --git a/README.md b/README.md index d3d3c1e..ffd67af 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_942 TILs and counting..._ +_943 TILs and counting..._ --- @@ -362,6 +362,7 @@ _942 TILs and counting..._ - [Timing Processes](javascript/timing-processes.md) - [Transforming ES6 and JSX With Babel 6](javascript/transforming-es6-and-jsx-with-babel-6.md) - [Truthiness of Integer Arrays](javascript/truthiness-of-integer-arrays.md) +- [Turn An HTMLCollection Into An Array](javascript/turn-an-html-collection-into-an-array.md) - [Turn Off Console Error Messages In A Test](javascript/turn-off-console-error-messages-in-a-test.md) - [Waiting On Multiple Promises](javascript/waiting-on-multiple-promises.md) - [Who Am I: NPM Edition](javascript/who-am-i-npm-edition.md) diff --git a/javascript/turn-an-html-collection-into-an-array.md b/javascript/turn-an-html-collection-into-an-array.md new file mode 100644 index 0000000..8dc0662 --- /dev/null +++ b/javascript/turn-an-html-collection-into-an-array.md @@ -0,0 +1,25 @@ +# Turn An HTMLCollection Into An Array + +If you are using any of the built-in document query utilities, such as +[`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName): + +```javascript +> document.getElementsByClassName("some-class") +HTMLCollection(5) [ ... ] +``` + +Then you are going to get an +[`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) +in response. An instance of this cannot be iterated over, so you cannot call +things like `map` and `filter` against it. + +To use Array collection methods, you are first going to need to turn the +`HTMLCollection` into an array. You can do this with +[`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from): + +```javascript +> Array.from(document.getElementsByClassName("some-class")) +[ ... ] +``` + +[source](https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc)