如何用document.querySelectorAll()获取#mainul下的直接子ul元素？

首先要明确：你提到的#mainul的直接子ul元素在给定DOM结构里并不存在——#mainul的直接子元素是两个<li>，你要找的两个ul是第二个<li>（data-uid="2"）的直接子元素。下面是几种适合JS新手的获取方式：

• 方法一：用CSS选择器直接定位（最简洁）
  利用CSS子选择器>精准匹配目标元素，一行代码搞定：

  const targetUls = document.querySelectorAll('#mainul li[data-uid="2"] > ul');
  

  说明：#mainul li[data-uid="2"]定位到包含目标ul的那个li，> ul只选中这个li的直接子ul，不会拿到更深层级的ul。

• 方法二：分步获取（更直观，适合理解DOM结构）
  拆解步骤，一步步定位元素，新手更容易理解：

  // 1. 获取id为mainul的元素
  const mainUl = document.getElementById('mainul');
  // 2. 获取mainul下的第二个li（索引从0开始，所以取[1]）
  const targetLi = mainUl.querySelectorAll('li')[1];
  // 3. 获取这个li的所有直接子ul元素
  const targetUls = targetLi.children;
  // 或者用querySelectorAll：targetLi.querySelectorAll('> ul')
  

  说明：getElementById是获取指定ID元素最快的方法，children属性会返回元素的所有直接子元素节点（自动过滤文本、注释这类非元素节点）。

• 方法三：获取所有后代ul后筛选（不推荐，易受DOM结构变化影响）
  如果只是想拿到#mainul下的前两个ul后代，可以这么做，但不如前两种精准：

  const allUls = document.querySelectorAll('#mainul ul');
  const targetUls = Array.from(allUls).slice(0, 2);
  

  说明：这种方式会拿到#mainul下所有层级的ul，再通过slice取前两个，一旦DOM结构新增ul，结果就会出错，所以优先用前两种方法。

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