diff --git a/68.get-DOM-tags.md b/68.get-DOM-tags.md new file mode 100644 index 0000000..b98d603 --- /dev/null +++ b/68.get-DOM-tags.md @@ -0,0 +1,152 @@ +# 68. get DOM tags + +### Problem + +https://bigfrontend.dev/problem/get-DOM-tags + +# + +### Problem Description + +Given a DOM tree, please return all the tag names it has. + +Your function should return a unique array of tags names in lowercase, order doesn't matter. + +# + +### Understanding the problem + +We are given a DOM tree and we are asked to write a function that returns all the unique **tag names** in it in an array. The tag names should be returned in lowercase, and we can return them in any order. + +# + +### Approach + +We could traverse the DOM tree using either DFS or BFS to get all of the tag names. To store only the unique tag names, we could make use of a `Set`, since a `Set` cannot have duplicate values. + +Because only an `Element` has the tag, as we traverse the DOM tree, we need to use `Element.children` rather than `Node.childNodes` to get only the child `Element`s. + +### Implementation + +Recursive DFS: + +```js +/** + * @param {HTMLElement} tree + * @return {string[]} + */ +function getTags(tree) { + const tagNames = new Set(); + + dfs(tree, tagNames); + return [...tagNames]; +} + +function dfs(el, tagNames) { + const tagName = el.tagName.toLowerCase(); + tagNames.add(tagName); + + for (const child of el.children) { + dfs(child, tagNames); + } +} +``` + +Iterative DFS: + +```js +/** + * @param {HTMLElement} tree + * @return {string[]} + */ +function getTags(tree) { + const tagNames = new Set(); + const stack = [tree]; + + while (stack.length > 0) { + const el = stack.pop(); + const tagName = el.tagName.toLowerCase(); + tagNames.add(tagName); + + stack.push(...el.children); + } + + return [...tagNames]; +} +``` + +Iterative BFS: + +```js +/** + * @param {HTMLElement} tree + * @return {string[]} + */ +function getTags(tree) { + const tagNames = new Set(); + // Assume we have a Queue data structure implemented. + const queue = [tree]; + + while (queue.length > 0) { + const el = queue.shift(); + const tagName = el.tagName.toLowerCase(); + tagNames.add(tagName); + + queue.push(...el.children); + } + + return [...tagNames]; +} +``` + +# + +### Usage + +```js +const DOM = { + tagName: "div", + children: [ + { + tagName: "h1", + children: [ + { + tagName: "span", + children: [ + { + tagName: "a", + children: [ + { + tagName: "span", + children: [], + }, + ], + }, + ], + }, + ], + }, + + { + tagName: "p", + children: [ + { + tagName: "span", + children: [], + }, + { + tagName: "a", + children: [ + { + tagName: "span", + children: [], + }, + ], + }, + ], + }, + ], +}; + +console.log(getTags(DOM)); // ["div", "h1", "span", "a", "p"] +```