JS 使用for循环遍历子节点查找元素

下面是使用for循环遍历子节点查找元素的完整攻略。

1. 获取父节点和子节点

首先，我们需要使用 document.getElementById()方法或其他方法获取到父节点，例如：

const parent = document.getElementById('parentNode');

然后，我们需要获取到父节点的所有子节点，可以使用 childNodes 属性或 children 属性来获取子节点，如下所示：

// 使用childNodes获取子节点
const childNodes = parent.childNodes;

//使用children获取子节点
const childrenNodes = parent.children;

2. 遍历子节点进行查找

接下来，我们需要使用for循环遍历所有子节点，查找我们需要的元素。在这里，我们可以使用 nodeName 或 nodeType 属性来查找指定的元素。nodeName 属性返回当前节点名称，nodeType 属性返回节点类型。

以下是一个例子，假设我们要查找所有类型为 li 的子元素：

for (let i = 0; i < childNodes.length; i++) {
  if (childNodes[i].nodeName === 'LI') {
    console.log(childNodes[i]);
  }
}

以上代码会将所有类型为 li 的子元素打印到控制台中。

下面是另一个例子，假设我们要查找所有类型为元素的子元素：

for (let i = 0; i < childNodes.length; i++) {
  if (childNodes[i].nodeType === 1) {
    console.log(childNodes[i]);
  }
}

以上代码会将所有类型为元素的子元素打印到控制台中。

在这里，我们使用 nodeType 属性的值为 1 来表示元素类型。

总结

以上就是使用for循环遍历子节点查找元素的完整攻略。我们首先获取父节点和子节点，然后使用for循环遍历所有子节点，查找我们需要的元素。在查找过程中，我们可以使用 nodeName 或 nodeType 属性来查找指定的元素。如果你想要查找多个类型的节点，可以将多个条件放在 if 语句中，并使用逻辑运算符连接。

另外，我们还可以使用 querySelectorAll() 方法来查找所有符合条件的元素，这个方法比 for 循环要更快，并且更简洁。例如，要查找所有类型为 li 的子元素，可以这样写：

const lis = parent.querySelectorAll('li');

但在某些情况下，使用 for 循环更为灵活和实用。