js根据children来判断,每次都拿到递归对象数组的第一层的最子级的第一个对象
时间: 2024-05-05 15:22:58 浏览: 13
可以使用递归来实现遍历子节点,找到最深层的第一个子节点。
假设有一个DOM结构如下:
```html
<div id="parent">
<div>
<span>第一层第一个子节点</span>
</div>
<div>
<div>
<span>第二层第一个子节点</span>
</div>
</div>
</div>
```
可以编写以下递归函数:
```javascript
function findFirstChildren(node) {
if (!node.children || node.children.length === 0) {
// 没有子节点,则当前节点就是最深层的节点
return node;
} else {
// 有子节点,则递归查找第一个子节点
return findFirstChildren(node.children[0]);
}
}
// 以parent为根节点,找到最深层的第一个子节点
const firstChild = findFirstChildren(document.getElementById('parent'));
console.log(firstChild); // 输出 <span>第一层第一个子节点</span>
```
这里的 `findFirstChildren` 函数接收一个节点作为参数,如果该节点没有子节点,则说明当前节点就是最深层的节点,直接返回该节点;否则,递归查找第一个子节点。通过反复递归,最终可以找到最深层的第一个子节点。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)