手动解析DOM树

目的：将HTML字符串解析成document对象，使其拥有可以操作DOM（Document Object Model）的能力。

废话不多说，上代码：

/**
 * 解析HTML字符串，返回document对象
 * 
 * @param {string} str 要解析的HTML字符串
 * @returns {Document} document
 */
const parseHtmlStr = (str) => {
  // 创建一个DOM解析器
  const parser = new DOMParser()
  // 获取document对象
  return parser.parseFromString(str, 'text/html')
}

const str = `
  <div class="container">
    <h1>DOM Parser</h1>
    <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
      <li>Saturday</li>
      <li>Sunday</li>
    </ul>
  </div>
`

const doc = parseHtmlStr(str)
doc.querySelectorAll('li').forEach((item) => {
  console.log(item.textContent)
})

// 依次打印：
// Monday
// Tuesday
// Wednesday
// Thursday
// Friday
// Saturday
// Sunday

参考视频：抖音 - 渡一前端必修课 - 手动解析DOM树