如何获取ul直接子li元素的innerHTML？不使用jQuery

没问题，咱们用原生JavaScript就能精准拿到内容为1、2、3的li元素的innerHTML。你的HTML里有嵌套的列表结构，直接用ul > li会把内层ul的子li（4、5）也选中，所以得做些精准筛选，下面给你几种可行的方法：

方法1：给外层ul加标识（最推荐） #

如果能修改HTML，给外层ul加个id或类名是最稳妥的方式，后续选择器精准且不易出错：

<html>
<body>
<ul id="outer-list"> <!-- 添加唯一标识 -->
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <div><div>
    <ul>
      <li>4</li>
      <li>5</li>
    </ul>
  </div></div>
</ul>
<script>
  // 精准选择外层ul的直接子li
  const targetLis = document.querySelectorAll('#outer-list > li');
  // 遍历获取每个li的innerHTML
  targetLis.forEach(li => {
    console.log(li.innerHTML); // 依次输出1、2、3
  });
</script>
</body>
</html>

方法2：不修改HTML，通过结构筛选 #

如果没法改动HTML，可以借助DOM的层级关系过滤掉内层的li：

<html>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <div><div>
    <ul>
      <li>4</li>
      <li>5</li>
    </ul>
  </div></div>
</ul>
<script>
  // 先获取所有ul的直接子li
  const allDirectLis = document.querySelectorAll('ul > li');
  // 过滤掉那些父ul被div包裹的li
  const targetLis = Array.from(allDirectLis).filter(li => {
    return !li.parentElement.closest('div');
  });
  // 输出结果
  targetLis.forEach(li => console.log(li.innerHTML));
</script>
</body>
</html>

另一种更简洁的方式是用:scope伪类，它能限定选择范围在当前元素内，直接选外层ul的直接子li：

const outerUl = document.querySelector('body > ul');
const targetLis = outerUl.querySelectorAll(':scope > li');
targetLis.forEach(li => console.log(li.innerHTML));

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