JS.GetAllChild(element,deep,condition)使用介绍

JS.GetAllChild(element,deep,condition) 是一个用来获取指定元素所有符合条件的子元素的函数。下面将详细介绍该函数的使用方式及注意事项。

语法

JS.GetAllChild(element, deep, condition);

参数：

• element: 必选，要查找子元素的父元素。
• deep: 可选，一个布尔值，默认为 false，表示是否递归查找所有子元素。
• condition: 可选，一个用来筛选满足条件子元素的函数。

返回值

该函数将返回一个数组，包含所有符合条件的子元素。

示例

<div id="container">
  <div class="item">第一项</div>
  <div class="item">第二项</div>
  <div class="item">第三项</div>
  <div class="sub">
    <div class="item">第四项</div>
    <div class="item">第五项</div>
  </div>
</div>

<script>
  const container = document.getElementById('container');
  const items = JS.GetAllChild(container, true, function(elem) {
    return elem.classList.contains('item');
  });
  console.log(items); //输出所有 class 为 'item' 的元素
</script>

以上示例中，我们获取了 id 为 container 的元素所有 class 为 'item' 的子元素。

下面再介绍一个只查找直接子元素的示例：

<div id="container">
  <div class="item">第一项</div>
  <div class="item">第二项</div>
  <div class="item">第三项</div>
  <div class="sub">
    <div class="item">第四项</div>
    <div class="item">第五项</div>
  </div>
</div>

<script>
  const container = document.getElementById('container');
  const children = JS.GetAllChild(container);
  console.log(children); //输出 container 的直接子元素
</script>

以上示例中，我们仅获取了 id 为 container 的元素的直接子元素。

注意事项

• condition 函数必须返回一个布尔值，以判断该子元素是否符合条件。
• 如果不传 deep 或设置为 false，则该函数只会获取父元素的直接子元素。如果设置为 true，则将递归获取所有子元素以及子元素的子元素。
• 使用该函数时，应注意该函数会遍历整个 DOM 树，因此不应该在大型的 DOM 树中频繁使用。