不使用jQuery与ID 如何用原生JS在HTML字符串中查找指定元素

原生JS内置的querySelector方法支持通过CSS选择器规则定位DOM元素，无需引入jQuery即可实现精准筛选。

原有代码的错误点： #

• document.body.innerHTML是字符串类型，仅存储页面的HTML文本内容，无法调用DOM节点查询方法
• getElementsByTagName仅接受纯标签名作为入参，不能直接拼接属性过滤规则
• code函数定义缺少闭合右花括号，存在语法错误

正确可运行代码： #

document.body.innerHTML =
`<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>`;

function code() {
  // 如需限定仅在北美区域的ul下查询，可将选择器修改为 'ul[data-continent="North America"] li[data-species="California condor"]'
  const targetEl = document.querySelector('li[data-species="California condor"]');
  return targetEl.textContent;
}

console.log(code())

运行上述代码会直接在控制台打印出Critically Endangered。

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