diff --git a/snippets/getImages.md b/snippets/getImages.md new file mode 100644 index 000000000..2508aec4e --- /dev/null +++ b/snippets/getImages.md @@ -0,0 +1,17 @@ +### getImages + +Fetches all images from within an element and puts them into an array + +Use `Element.prototype.getElementsByTagName()` to fetch all `` elements inside the provided element, `Array.prototype.map()` to map every `src` attribute of their respective `` element, then create a `Set` to eliminate duplicates and return the array. + +```js +const getImages = (el, includeDuplicates = false) => { + const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src")); + return includeDuplicates ? images : [...(new Set(images))]; +}; +``` + +```js +getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...'] +getImages(document, false); // ['image1.jpg', 'image2.png', '...'] +``` diff --git a/tag_database b/tag_database index f84b5ee40..cd05988b1 100644 --- a/tag_database +++ b/tag_database @@ -96,6 +96,7 @@ geometricProgression:math,intermediate get:object,intermediate getColonTimeFromDate:date,intermediate getDaysDiffBetweenDates:date,intermediate +getImages:browser,beginner getMeridiemSuffixOfInteger:date,beginner getScrollPosition:browser,intermediate getStyle:browser,css,beginner diff --git a/test/getImages/getImages.js b/test/getImages/getImages.js new file mode 100644 index 000000000..a01a6c818 --- /dev/null +++ b/test/getImages/getImages.js @@ -0,0 +1,5 @@ +const getImages = (el, includeDuplicates = false) => { + const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src")); + return includeDuplicates ? images : [...(new Set(images))]; +}; +module.exports = getImages; diff --git a/test/getImages/getImages.test.js b/test/getImages/getImages.test.js new file mode 100644 index 000000000..668172d31 --- /dev/null +++ b/test/getImages/getImages.test.js @@ -0,0 +1,18 @@ +const expect = require("expect"); +const getImages = require("./getImages.js"); +const jsdom = require("jsdom"); +const { JSDOM } = jsdom; +const TEST_HTML = new JSDOM("

Hello world

").window.document; + +test("getImages is a Function", () => { + expect(getImages).toBeInstanceOf(Function); +}); + +test("getImages returns an Array", () => { + expect(getImages(TEST_HTML)).toBeInstanceOf(Array); +}); + +test("getImages removes duplicates from images Array", () => { + expect(getImages(TEST_HTML, false).length).toBeLessThanOrEqual(getImages(TEST_HTML, true).length); + expect(getImages(TEST_HTML, true)).toEqual(expect.arrayContaining(getImages(TEST_HTML, false))); +});\n