如何使用JavaScript引用标签填充数据？含嵌套div中h4标签场景

嘿，我来帮你搞定这两个JavaScript DOM操作的问题，都是日常开发里高频用到的操作，一步步给你讲明白～

日常开发里引用DOM元素的方式挺多的，我给你列几个最常用的，配上例子一看就懂：

通过ID获取元素（最直接高效） #

如果你的标签有唯一ID，用getElementById准没错，执行速度还快。比如HTML里有个<p id="my-paragraph"></p>，JS里这么操作：

// 引用目标元素
const myPara = document.getElementById('my-paragraph');
// 填充纯文本数据（推荐，安全不解析HTML）
myPara.textContent = '这是用textContent填充的普通文本';
// 要是需要填充带HTML结构的内容，用innerHTML（注意：别用在用户输入的内容上，有XSS风险）
myPara.innerHTML = '<strong>这是带加粗样式的内容</strong>';

通过CSS选择器获取元素（最灵活） #

querySelector支持所有CSS选择器语法，不管是类名、标签名、属性选择器都能搞定。比如要选类名为content-box的div：

const contentBox = document.querySelector('.content-box');
// 填充数据
contentBox.textContent = '用灵活的选择器找到元素啦，填充内容ing';

如果要批量选多个同类型元素，用querySelectorAll，它返回元素集合，需要遍历或者通过索引操作单个元素。

通过标签名/类名批量获取 #

如果要找所有同标签的元素（比如所有<p>标签），用getElementsByTagName：

const allParas = document.getElementsByTagName('p');
// 取第一个p标签填充内容
allParas[0].textContent = '这是第一个段落的填充内容';

类名的话用getElementsByClassName，用法类似，返回的也是元素集合。

先假设你的HTML结构大概是这样的（实际结构可以调整选择器适配）：

<div class="level-1">
  <div class="level-2">
    <div class="level-3">
      <h4>我是要填充数据的目标标签</h4>
    </div>
  </div>
</div>

方法1：直接用嵌套CSS选择器定位 #

用querySelector一步到位，把三层div的选择器和h4连起来就能精准定位：

// 定位到目标h4
const targetH4 = document.querySelector('.level-1 .level-2 .level-3 h4');
// 准备要填充的数组数据
const dataArray = ['HTML', 'CSS', 'JavaScript', 'DOM操作'];
// 把数组转成字符串填充，用竖线分隔元素
targetH4.textContent = dataArray.join(' | ');
// 要是想给每个元素加样式，用innerHTML生成结构化内容
targetH4.innerHTML = dataArray.map(item => `<span style="color: #2563eb;">${item}</span>`).join(' ');

方法2：逐层查找元素（适合结构复杂场景） #

如果担心嵌套选择器太长或者结构可能变动，也可以一层一层找父元素，再定位子元素：

// 先找最外层div
const level1Div = document.querySelector('.level-1');
// 从外层div里找中间层div
const level2Div = level1Div.querySelector('.level-2');
// 从中间层找内层div
const level3Div = level2Div.querySelector('.level-3');
// 最后找到目标h4
const targetH4 = level3Div.querySelector('h4');
// 填充数组数据，用换行分隔每个元素
targetH4.textContent = dataArray.join('\n');

这种方式的好处是，要是中间某层结构调整，只需要修改对应的那一步就行，不用改整个长选择器。

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