Update getElementsBiggerThanViewport.md

There is no reason to use reduce when when you don't need to.
`.filter()` is much simpler to reason, easier to read and more verbose
This commit is contained in:
Itamar Yatom
2020-10-08 14:36:30 +03:00
committed by GitHub
parent 7f95bbb8f3
commit 84d2584218

View File

@ -6,15 +6,12 @@ tags: browser,intermediate
Returns an array of HTML elements whose width is larger than that of the viewport's. Returns an array of HTML elements whose width is larger than that of the viewport's.
- Use `HTMLElement.prototype.offsetWidth()` to get the width of the `document`. - Use `HTMLElement.prototype.offsetWidth()` to get the width of the `document`.
- Use `Array.prototype.reduce()` on the result of `document.querySelectorAll()` to check the width of all elements in the document. - Use `Array.prototype.filter()` on the result of `document.querySelectorAll()` to check the width of all elements in the document.
```js ```js
const getElementsBiggerThanViewport = () => { const getElementsBiggerThanViewport = () => {
const docWidth = document.documentElement.offsetWidth; const docWidth = document.documentElement.offsetWidth;
return [...document.querySelectorAll('*')].reduce((acc, el) => { return [...document.querySelectorAll('*')].filter(el => el.offsetWidth > docWidth);
if (el.offsetWidth > docWidth) acc.push(el);
return acc;
}, []);
} }
``` ```