JS查找孩子节点简单示例

JS查找孩子节点是在前端开发中常用的操作，可以通过它来查找DOM树中某个节点的直接子节点或者所有子孙节点。以下是JS查找孩子节点的完整攻略：

1. 获取父节点元素

首先需要获取需要查找孩子节点的父元素，可以使用 querySelector 或者 getElementById 等方式获取DOM树中对应的父节点元素。例如：

const parentEle = document.querySelector('#parent');

2. 查找孩子节点

接下来就可以通过父元素查找其对应的孩子节点了。这可以通过父元素的 children 属性获取，children 属性是一个类数组对象，其中包含着所有的子节点。我们可以使用 for 循环遍历它来查找指定的孩子节点。

示例1：查找单个孩子节点

如下示例所示，我们可以通过 querySelector 查找父元素中的孩子节点，然后获取孩子节点的内容。

<div id="parent">
  <span>我的第一个span</span>
  <span>我的第二个span</span>
</div>

const parentEle = document.querySelector('#parent');
const childEle = parentEle.querySelector('span');
console.log(childEle.innerHTML);  //输出：我的第一个span

示例2：查找所有孩子节点

如下示例所示，我们可以通过遍历 children 属性来查找父节点的所有孩子节点。

<div id="parent">
  <span>我的第一个span</span>
  <span>我的第二个span</span>
</div>

const parentEle = document.querySelector('#parent');
const children = parentEle.children;
for (let i = 0; i < children.length; i++) {
  console.log(children[i].innerHTML);
}
//输出：
//我的第一个span
//我的第二个span

以上就是查找孩子节点的完整攻略及两个示例说明。