如何无需循环从div获取子元素并查看子元素ID？

Hey 👋，这两个需求都完全不用写循环，原生DOM API就有现成的方案，给你拆解一下：

需求1：无需循环从div元素中获取其子元素 #

这里分两种场景，看你要的是仅元素类型的子节点还是包含文本/注释的所有子节点：

• 用Element.children：直接返回一个HTMLCollection，里面全是当前div的直接子元素（自动过滤掉文本、注释这类非元素节点），完全不用循环遍历：

  const myDiv = document.getElementById('my-parent-div');
  // 直接拿到所有子元素集合
  const directChildElements = myDiv.children;
  // 如果需要转成数组方便后续操作（用展开运算符，也不用循环）
  const childElementsArray = [...myDiv.children];
  

• 用Element.querySelectorAll（精准控制选择范围）：如果要更灵活的选择（比如只拿子元素里的p标签），可以用:scope伪类指定当前元素作为上下文，直接选直接子元素：

  // 只拿当前div下的直接子p元素
  const directChildPs = myDiv.querySelectorAll(':scope > p');
  

需求2：无需循环查看嵌套元素的子元素ID #

假设你已经拿到了那个嵌套在父div里的目标元素（比如叫targetElement），要获取它的子元素ID，同样不用手动写循环：

• 一次性获取所有子元素的ID：用展开运算符把children转成数组，再用map方法提取ID（map是数组内置方法，不用你自己写循环逻辑）：

  // 获取所有直接子元素的ID，返回一个数组
  const childIds = [...targetElement.children].map(child => child.id);
  

• 只筛选有有效ID的子元素：如果有些子元素可能没有ID，用属性选择器先过滤，再提取：

  // 只拿带有id属性的子元素的ID
  const validChildIds = [...targetElement.querySelectorAll(':scope > [id]')].map(el => el.id);
  

• 单个子元素的ID：如果只需要第一个/最后一个子元素的ID，直接用对应属性：

  // 第一个子元素的ID（可选链避免报错）
  const firstChildId = targetElement.firstElementChild?.id;
  // 最后一个子元素的ID
  const lastChildId = targetElement.lastElementChild?.id;
  

这些方案都是利用原生API或者数组内置方法，完全不用自己写for/while这类循环，简洁又高效～

内容的提问来源于stack exchange，提问作者anonymous-dev