实现endangeredSpecies函数：查询指定大陆物种的濒危状态

现有HTML结构 #

页面中存在如下HTML结构，按大陆分组展示濒危物种及其状态：

<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
    <ul data-continent="Europe">
        <li data-species="Cave bear">Extinct</li>
    </ul>
</div>

功能需求 #

需要实现endangeredSpecies函数，接收两个参数：大陆名称和物种名称，返回该大陆下指定物种的濒危等级。
示例：调用endangeredSpecies('North America', 'American bison')，应返回'Near Threatened'。

当前尝试的代码 #

以下是当前写的代码，但它的功能是返回指定大陆下所有物种的状态列表，不符合需求：

const endangeredSpecies = continent => [...document.querySelectorAll(`div [data-continent="${continent}"] li`)].map(li =>
  `${li.dataset.species}: ${li.textContent}`).join('\n');

修正后的实现方案 #

下面是符合需求的函数实现：

const endangeredSpecies = (continent, species) => {
  // 定位目标大陆的ul容器
  const targetContinent = document.querySelector(`div ul[data-continent="${continent}"]`);
  if (!targetContinent) return '未找到对应大陆';
  
  // 在目标大陆容器内查找指定物种的li元素
  const targetSpecies = targetContinent.querySelector(`li[data-species="${species}"]`);
  return targetSpecies ? targetSpecies.textContent.trim() : '未找到对应物种';
};

代码说明 #

• 先通过属性选择器精准定位到对应大陆的<ul>元素，避免跨大陆查找
• 再在该<ul>内部查找指定物种的<li>元素
• 添加了基础的异常处理，当大陆或物种不存在时返回提示文本（可根据实际需求调整返回值，比如null）

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