原生js实现find找到孙元素
时间: 2023-09-04 12:01:54 浏览: 173
vuejs2.0运用原生js实现简单拖拽元素功能
原生JavaScript实现查找孙元素,需要使用DOM操作函数和递归算法。首先,我们需要获取到父元素和孙元素的标识,可以通过获取父元素的id或类名来获取父元素节点,而孙元素比较难通过直接获取,我们可以通过遍历或其他方式找到。
```javascript
function findGrandChildElem(parentElemId) {
// 获取父元素节点
const parentElem = document.getElementById(parentElemId);
// 递归函数用于查找孙元素
function findGrandChild(node) {
// 初始化孙元素数组
let grandChildElems = [];
// 遍历子元素节点
for (let child of node.children) {
// 如果子元素节点有子元素节点,递归调用该函数
if (child.children.length > 0) {
grandChildElems = grandChildElems.concat(findGrandChild(child));
}
// 将孙元素节点添加到孙元素数组中
grandChildElems.push(...child.children);
}
return grandChildElems;
}
// 调用递归函数查找孙元素
const grandChildElems = findGrandChild(parentElem);
// 返回孙元素数组
return grandChildElems;
}
// 示例用法
const grandChildElements = findGrandChildElem('parent-container');
console.log(grandChildElements);
```
上述代码中,`findGrandChildElem`函数使用DOM操作函数获取到父元素节点,然后调用递归函数`findGrandChild`找到所有的孙元素节点,并将它们添加到一个数组中返回。最后,我们可以通过控制台输出这个孙元素数组。需要注意的是,`parentElemId`参数应该是父元素节点的id值。
阅读全文