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
rootisnull, the function should return an empty array.
Example Use Cases
Example 1: Diverse Elements
HTML
<div id="root">
<span>
<p>Hello</p>
</span>
<p>World</p>
</div>
getTags(document.getElementById('root'));
// Expected Output: ["DIV", "SPAN", "P"]Example 2: Nested Lists
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
getTags(document.querySelector('ul'));
// Expected Output: ["UL", "LI"]Example 3: Deep Nesting
HTML
<div>
<div>
<div>
<section></section>
</div>
</div>
</div>
getTags(document.querySelector('div'));
// Expected Output: ["DIV", "SECTION"]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
Setto 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.tagNametypically returns uppercase, but consistency is key for the final output?