js 父元素里面找某个类名的dom子元素
时间: 2023-06-28 11:11:24 浏览: 59
可以使用 JavaScript 的 `querySelector` 方法和选择器语法来实现。具体方法如下:
```javascript
const parentElement = document.querySelector('.parent-class'); // 获取父元素
const childElement = parentElement.querySelector('.child-class'); // 获取子元素
```
其中,`.parent-class` 和 `.child-class` 分别是父元素和子元素的类名。如果要获取多个符合条件的子元素,可以使用 `querySelectorAll` 方法。例如:
```javascript
const parentElement = document.querySelector('.parent-class'); // 获取父元素
const childElements = parentElement.querySelectorAll('.child-class'); // 获取多个子元素
```
注意,`querySelector` 和 `querySelectorAll` 方法都返回一个 NodeList 对象,需要通过索引或循环来访问其中的元素。
相关问题
vue中ref获取dom的子元素
在Vue中,可以通过`$refs`对象来获取DOM元素的引用。如果要获取DOM元素的子元素,可以使用原生JavaScript中的`querySelector`或`querySelectorAll`方法,例如:
```
<template>
<div ref="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</template>
<script>
export default {
mounted() {
const parent = this.$refs.parent;
const children = parent.querySelectorAll('.child');
console.log(children);
}
}
</script>
```
在上面的例子中,我们首先通过`$refs`获取了父元素的引用,然后使用`querySelectorAll`方法获取所有具有`.child`类名的子元素。
原生js实现find找到孙元素
原生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值。
相关推荐
![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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)