遍历输出元素的tagName

题目描述

分别使用深度优先和广度优先来遍历输出以下 dom 结构的 tagName

<div id="root">
	<main>
		<header>
			<nav></nav>
			<div>
				<span></span>
				<span></span>
			</div>
		</header>
		<article>
			<h1></h1>
			<p></p>
			<h2></h2>
			<p></p>
			<h2></h2>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</article>
		<footer></footer>
	</main>
	<aside>
		<section>
			<ol>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</section>
		<p></p>
	</aside>
</div>

思路&js代码

1、深度优先遍历

function dfs(dom) {
  if (!dom.tagName) return
  console.log(dom.tagName)
  dom.childNodes.forEach(child => {
    test(child)
  })
}

2、广度优先遍历

function bfs(dom) {
  let arr = [dom]
 
  while (arr.length) {
    arr.forEach(item => console.log(item.tagName))
 
    const _tmp = []
    arr.forEach(item => {
      item.childNodes.forEach(child => {
        if (child.tagName) _tmp.push(child)
      })
    })
    arr = _tmp
  }
}