Your Accessibility Audit Tool Needs to Collect All Unique HTML Tag Names in a Document

Technical Interview Challenge: The "Accessibility Auditor" Tree Traversal

Context

When building accessibility (A11y) auditing tools or SEO scrapers, you often need to analyze the semantic structure of a webpage. A common first step is to inventory the types of HTML tags being used to ensure a healthy balance of semantic elements (like <main>, <article>, <nav>) versus non-semantic containers (like <div> or <span>).

At a browser level, the Document Object Model (DOM) is an N-ary tree. Efficiently traversing this tree while maintaining a record of unique nodes is a fundamental skill for building browser extensions and high-performance frontend crawlers.

Problem Statement

Implement a function getTags(root) that performs a full traversal of a DOM tree starting from a given root element. The function should collect and return an array of all unique tag names (in uppercase) present in the tree.

Requirements:

Unique Collection: Each tag name should appear only once in the resulting array.
Order of Encounter: The tags must be returned in the order they are first encountered during a Depth-First Search (DFS) traversal.
Efficiency: The solution should handle deep or wide trees without excessive memory overhead.
Null Safety: If the root is null, the function should return an empty array.

Example Use Cases

Example 1: Diverse Elements

HTML

Example 2: Nested Lists

HTML

Example 3: Deep Nesting

HTML

Interview Evaluation Criteria

Traversal Strategy: Do you use a recursive approach or an iterative approach with a stack? Can you explain the trade-offs regarding the call stack limit?
Data Structures: Are you using a Set to track uniqueness efficiently ($O(1)$ lookup)?
DOM API Knowledge: Do you know the difference between .children (Elements only) and .childNodes (includes Text and Comment nodes)?
Case Consistency: How do you handle the fact that element.tagName typically returns uppercase, but consistency is key for the final output?

Technical Interview Challenge: The "Accessibility Auditor" Tree Traversal

Context

Problem Statement

Requirements:

Unique Collection: Each tag name should appear only once in the resulting array.
Order of Encounter: The tags must be returned in the order they are first encountered during a Depth-First Search (DFS) traversal.
Efficiency: The solution should handle deep or wide trees without excessive memory overhead.
Null Safety: If the root is null, the function should return an empty array.

Example Use Cases

Example 1: Diverse Elements

HTML

Example 2: Nested Lists

HTML

Example 3: Deep Nesting

HTML

Interview Evaluation Criteria

Traversal Strategy: Do you use a recursive approach or an iterative approach with a stack? Can you explain the trade-offs regarding the call stack limit?
Data Structures: Are you using a Set to track uniqueness efficiently ($O(1)$ lookup)?
DOM API Knowledge: Do you know the difference between .children (Elements only) and .childNodes (includes Text and Comment nodes)?
Case Consistency: How do you handle the fact that element.tagName typically returns uppercase, but consistency is key for the final output?