From a5508bc0ca94c9fc6b0405a53ac4ac266ee60211 Mon Sep 17 00:00:00 2001 From: rsimpson2 Date: Wed, 21 Jan 2026 07:49:49 -0500 Subject: [PATCH 1/2] GFE getElementsByStyle Problem --- README.md | 2 +- greatfrontend/gfe-75/README.md | 4 +-- .../getElementsByStyle/README.md | 23 ++++++++++++++++ .../getElementsByStyle/getElementsByStyle.ts | 27 +++++++++++++++++++ 4 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md create mode 100644 greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts diff --git a/README.md b/README.md index 278232b..8c1a75f 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A comprehensive collection of coding challenges from multiple platforms for lear | Platform | Focus Area | Problems Solved | | ------------------------------- | ---------------------------- | --------------- | | [LeetCode](#leetcode) | Data Structures & Algorithms | 171 | -| [GreatFrontEnd](#greatfrontend) | Frontend Engineering | 12 | +| [GreatFrontEnd](#greatfrontend) | Frontend Engineering | 13 | ## Platforms diff --git a/greatfrontend/gfe-75/README.md b/greatfrontend/gfe-75/README.md index ac7d96e..7c8443f 100644 --- a/greatfrontend/gfe-75/README.md +++ b/greatfrontend/gfe-75/README.md @@ -4,7 +4,7 @@ The GFE 75 is GreatFrontEnd's curated collection of 75 essential frontend coding ## 📊 Progress Tracker -### Status: 6 / 75 problems completed +### Status: 7 / 75 problems completed ## ✅ Completed Problems @@ -18,7 +18,7 @@ The GFE 75 is GreatFrontEnd's curated collection of 75 essential frontend coding ### DOM Manipulation -No problems completed yet +- [getElementsByStyle](./dom-manipulation/getElementsByStyle/) - Medium ### Async Programming diff --git a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md new file mode 100644 index 0000000..3de971e --- /dev/null +++ b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md @@ -0,0 +1,23 @@ +# getElementsByStyle + +Implement a method `getElementsByStyle()` that finds DOM elements that are rendered by the browser using the specified style. It is similar to `Element.getElementsByClassName()` but with some differences: + +- It is a pure function which takes in an element, a property string, and a value string representing the style's property/value pair to be matched on the elements descendants. E.g. `getElementsByStyle(document.body, 'font-size', '12px')`. +- Similar to `Element.getElementsByClassName()``, only descendants of the element argument are searched, not the element itself. +- Return an array of `Elements`, instead of an `HTMLCollection` of `Elements`. + +## Examples + +```javascript +const doc = new DOMParser().parseFromString( + `
+ Span +

Paragraph

+
Blockquote
+
`, + 'text/html' +); + +getElementsByStyle(doc.body, 'font-size', '12px'); +// [span, p] <-- This is an array of elements. +``` diff --git a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts new file mode 100644 index 0000000..4f5554d --- /dev/null +++ b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts @@ -0,0 +1,27 @@ +export function getElementsByStyle( + element: Element, + property: string, + value: string +): Element[] { + const elements: Element[] = []; + + function traverseDOM(el: Element) { + if (el === null) { + return; + } + + const computedStyle = getComputedStyle(el); + + if (computedStyle.getPropertyValue(property) === value) { + elements.push(el); + } + + for (const child of el.children) { + traverseDOM(child); + } + } + for (const child of element.children) { + traverseDOM(child); + } + return elements; +} From 682a4967fef7ad6e5a5514db071362126bb650e2 Mon Sep 17 00:00:00 2001 From: rsimpson2 Date: Wed, 21 Jan 2026 09:15:22 -0500 Subject: [PATCH 2/2] code review updates --- .../gfe-75/dom-manipulation/getElementsByStyle/README.md | 2 +- .../dom-manipulation/getElementsByStyle/getElementsByStyle.ts | 4 ---- tsconfig.json | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md index 3de971e..34d55b0 100644 --- a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md +++ b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md @@ -3,7 +3,7 @@ Implement a method `getElementsByStyle()` that finds DOM elements that are rendered by the browser using the specified style. It is similar to `Element.getElementsByClassName()` but with some differences: - It is a pure function which takes in an element, a property string, and a value string representing the style's property/value pair to be matched on the elements descendants. E.g. `getElementsByStyle(document.body, 'font-size', '12px')`. -- Similar to `Element.getElementsByClassName()``, only descendants of the element argument are searched, not the element itself. +- Similar to `Element.getElementsByClassName()`, only descendants of the element argument are searched, not the element itself. - Return an array of `Elements`, instead of an `HTMLCollection` of `Elements`. ## Examples diff --git a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts index 4f5554d..bb906b8 100644 --- a/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts +++ b/greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts @@ -6,10 +6,6 @@ export function getElementsByStyle( const elements: Element[] = []; function traverseDOM(el: Element) { - if (el === null) { - return; - } - const computedStyle = getComputedStyle(el); if (computedStyle.getPropertyValue(property) === value) { diff --git a/tsconfig.json b/tsconfig.json index 2835637..fc8709e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "ES2020", "module": "commonjs", - "lib": ["ES2020"], + "lib": ["ES2020", "dom"], "outDir": "./dist", "rootDir": "./", "strict": true,