Skip to content

GFE getElementsByStyle Problem #208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pertrai1 merged 2 commits into from
Jan 22, 2026
Merged

GFE getElementsByStyle Problem #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5508bc
GFE getElementsByStyle Problem
pertrai1 Jan 21, 2026
682a496
code review updates
pertrai1 Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions greatfrontend/gfe-75/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
23 changes: 23 additions & 0 deletions greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.

Comment on lines +1 to +8

@coderabbitai coderabbitai Bot Jan 21, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add problem metadata + complexity section.

This README is missing the difficulty badge, problem link, constraints, and Big‑O complexity note. Please add them to align with the repo’s README guidelines. As per coding guidelines, ...

🤖 Prompt for AI Agents 
In `@greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md` around
lines 1 - 8, The README for getElementsByStyle is missing metadata and
complexity details; update
greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/README.md to include
the difficulty badge, a link to the original problem, constraints/expected
behavior summary, and a Big-O complexity section (time and space) for the
getElementsByStyle(element, property, value) function so it matches the repo
README guidelines and other problem READMEs; ensure you reference the function
name getElementsByStyle and describe that it searches only descendants (not the
element itself) when explaining constraints.

## Examples

```javascript
const doc = new DOMParser().parseFromString(
`<div>
<span style="font-size: 12px">Span</span>
<p style="font-size: 12px">Paragraph</p>
<blockquote style="font-size: 14px">Blockquote</blockquote>
</div>`,
'text/html'
);

getElementsByStyle(doc.body, 'font-size', '12px');
// [span, p] <-- This is an array of elements.
```
23 changes: 23 additions & 0 deletions greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export function getElementsByStyle(
element: Element,

Check failure on line 2 in greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts

View workflow job for this annotation

GitHub Actions / Analyze Changed Files 

'Element' is not defined
property: string,
value: string
): Element[] {

Check failure on line 5 in greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts

View workflow job for this annotation

GitHub Actions / Analyze Changed Files 

'Element' is not defined
Comment thread
coderabbitai[bot] marked this conversation as resolved.
const elements: Element[] = [];

Check failure on line 6 in greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts

View workflow job for this annotation

GitHub Actions / Analyze Changed Files 

'Element' is not defined

function traverseDOM(el: Element) {

Check failure on line 8 in greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts

View workflow job for this annotation

GitHub Actions / Analyze Changed Files 

'Element' is not defined
const computedStyle = getComputedStyle(el);

Check failure on line 9 in greatfrontend/gfe-75/dom-manipulation/getElementsByStyle/getElementsByStyle.ts

View workflow job for this annotation

GitHub Actions / Analyze Changed Files 

'getComputedStyle' is not defined

@github-actions github-actions Bot Jan 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Performance consideration: getComputedStyle() is called for every element in the tree, even if the property doesn't match. While this is correct, be aware that getComputedStyle() triggers browser reflow and is relatively expensive.

For large DOM trees, consider:

  • Caching computed styles if querying multiple properties
  • Using element.style.getPropertyValue() first for inline styles (though this changes behavior)

For this problem's requirements (matching computed styles), the current approach is correct but worth noting the performance implications in real-world scenarios.


if (computedStyle.getPropertyValue(property) === value) {

@github-actions github-actions Bot Jan 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normalization consideration: Different browsers may return property values in different formats (e.g., "12px" vs "12.0px", or color values as "rgb(255, 0, 0)" vs "#ff0000"). The current strict equality check assumes the value parameter matches the browser's exact format.

For production code, you might want to normalize values, especially for:

  • Colors (rgb/hex/hsl conversions)
  • Dimensions (handling of units)
  • Whitespace differences

However, for this coding challenge, the strict equality is appropriate as the problem likely assumes normalized inputs.

elements.push(el);
}

for (const child of el.children) {
traverseDOM(child);
}
}
for (const child of element.children) {
traverseDOM(child);
}
return elements;
}
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"lib": ["ES2020", "dom"],
"outDir": "./dist",
"rootDir": "./",
"strict": true,
Expand Down