如何使用JavaScript通过下拉菜单动态修改标题的h标签等级

实现思路说明 #

DOM元素的tagName属性为只读，无法直接修改原有标签类型，你原本的字符串替换思路是可行的，不过有更稳妥、容错率更高的实现方式，不需要手动截取标签名的数字部分：

1. 监听下拉菜单的change事件，获取选中的标题等级
2. 生成对应等级的新标题元素，复制原有标题的内容、属性
3. 用新元素替换原有标题元素即可

完整可运行代码示例 #

HTML部分

<!-- 标题等级选择下拉菜单 -->
<select id="levelSelector">
  <option value="1" selected>h1</option>
  <option value="2">h2</option>
  <option value="3">h3</option>
  <option value="4">h4</option>
  <option value="5">h5</option>
  <option value="6">h6</option>
</select>

<!-- 待修改的目标标题 -->
<h1 id="targetHeading">示例标题内容</h1>

JavaScript部分

提供两种实现方案，按需选择即可：

const selector = document.getElementById('levelSelector')
let target = document.getElementById('targetHeading')

selector.addEventListener('change', function() {
  const selectedLevel = this.value

  // 方案1：轻量场景用outerHTML直接修改，代码最简
  target.outerHTML = `<h${selectedLevel} id="targetHeading">${target.textContent}</h${selectedLevel}>`
  // 替换后重新获取目标元素，方便后续连续修改
  target = document.getElementById('targetHeading')


  /* 方案2：需要保留原元素的自定义属性、绑定事件时用，兼容性更好
  const newHeading = document.createElement(`h${selectedLevel}`)
  // 复制原有内容
  newHeading.textContent = target.textContent
  // 复制原元素所有属性（id、class、自定义属性等）
  Array.from(target.attributes).forEach(attr => {
    newHeading.setAttribute(attr.name, attr.value)
  })
  // 替换旧元素
  target.replaceWith(newHeading)
  // 更新target指向新元素
  target = newHeading
  */
})

扩展说明 #

如果需要批量修改多个标题的等级，只需要给所有目标标题加统一类名，选中后遍历执行替换逻辑即可。

内容的提问来源于stack exchange，提问作者ddd