如何使用JavaScript获取指定HTML结构中的所有dt和dd元素

先把咱们要处理的HTML结构贴出来，方便对照：

<ul id="current"> 
  <li class="session"> 
    <dl> 
      <dt>Mumbai, Maharashtra, India</dt> 
      <dd>Approximate location</dd> 
      <dt>Safari on Mac OS X</dt> 
      <dt>IP Address:</dt> 
      <dd>110.227.252.240</dd> 
    </dl> 
  </li> 
</ul>

下面是几种实用的实现方法，你可以根据自己的技术栈来选：

方法一：原生JavaScript（用querySelectorAll一步到位） #

这是最省心的方式，直接用CSS选择器语法一次性选中所有目标元素：

// 精准定位#current下的dl里的所有dt和dd
const targetElements = document.querySelectorAll('#current .session dl dt, #current .session dl dd');

// 遍历查看每个元素的内容
targetElements.forEach(element => {
  console.log(element.textContent.trim());
});

用querySelectorAll的好处是支持复杂选择器，能避免误选页面上其他无关的dt/dd元素，精准度拉满。

方法二：原生JavaScript（分开获取dt和dd） #

如果你需要对dt和dd做不同的处理，比如分别收集内容，那就分开获取更灵活：

// 先拿到最外层的dl元素
const dlContainer = document.querySelector('#current .session dl');

// 分别获取所有dt和dd
const allDt = dlContainer.querySelectorAll('dt');
const allDd = dlContainer.querySelectorAll('dd');

// 处理dt内容
allDt.forEach(dt => {
  console.log('DT内容：', dt.textContent.trim());
});

// 处理dd内容
allDd.forEach(dd => {
  console.log('DD内容：', dd.textContent.trim());
});

这种分步的方式逻辑更清晰，适合需要对两种元素做差异化操作的场景。

方法三：jQuery实现（项目用jQuery的话更简洁） #

要是你的项目已经引入了jQuery，那代码会更短，写起来更顺手：

// 找到目标dl下的所有dt和dd
const $targets = $('#current .session dl').find('dt, dd');

// 遍历输出每个元素的文本
$targets.each(function() {
  console.log($(this).text().trim());
});

jQuery的链式调用语法很直观，熟悉的话写起来效率很高。

总之核心思路就是通过选择器精准定位到目标元素，再根据需求遍历或者操作就行啦～

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