document. querySelector()获取参数中的子元素
时间: 2023-10-12 13:17:26 浏览: 36
`document.querySelector()`是一个用于获取文档中指定选择器匹配的第一个元素的方法,可以通过在参数中传递一个字符串选择器来指定要获取的元素。如果要获取指定元素的子元素,可以使用CSS选择器中的子元素选择器(`>`)来指定子元素的类型和类名。例如,可以使用以下代码来获取一个类名为`my-class`的`div`元素的所有直接子元素中的`p`元素:
```
const myDiv = document.querySelector('.my-class');
const myParagraphs = myDiv.querySelectorAll('p');
```
这将返回一个包含所有`myDiv`元素的直接子元素中的`p`元素的NodeList对象。
相关问题
document.querySelector 获取某个class下级
document.querySelector是JavaScript中的一个方法,用于通过CSS选择器获取文档中匹配的第一个元素。它可以用来获取某个class下的子元素。
使用document.querySelector方法时,需要传入一个CSS选择器作为参数。选择器可以是元素名、类名、ID等等。如果有多个匹配的元素,该方法只会返回第一个匹配的元素。
下面是一个示例代码,演示如何使用document.querySelector获取某个class下的子元素:
HTML代码:
```html
<div class="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
<div class="child">子元素3</div>
</div>
```
JavaScript代码:
```javascript
const parentElement = document.querySelector('.parent');
const childElement = parentElement.querySelector('.child');
console.log(childElement.textContent); // 输出:子元素1
```
在上面的代码中,首先使用document.querySelector('.parent')获取到class为"parent"的父元素,然后使用parentElement.querySelector('.child')获取到class为"child"的子元素。最后,通过childElement.textContent可以获取到子元素的文本内容。
let category = document.querySelector('.menu .category') let categoryData = [ {'title': '贵阳/风景/美食'}, {'title': '遵义/风景/美食'}, {'title': '六盘水/风景/美食'}, {'title': '铜仁/风景/美食'}, {'title': '黔西南/风景/美食'}, {'title': '安顺/风景/美食'}, {'title': '毕节/风景/美食'}, {'title': '黔南州/风景/美食'}, {'title': '黔东南/风景/美食'}, {'title': '兴义/风景/美食'}, {'title': '凯里/风景/美食'} ] categoryData.forEach((e,i) => { // 创建一级菜单标题元素 let categorytitle = document.createElement('div') // 给一级菜单设置class属性 categorytitle.className = 'title' // 给一级菜单设置文字 categorytitle.innerHTML = e.title // 创建一级菜单的li元素 let category_li = document.createElement('li') // 将标题元素添加到li元素 category_li.appendChild(categorytitle) // 将li元素添加到 category div中 category.appendChild(category_li) })讲解这段代码
这段代码用于根据给定的数据动态生成一级菜单,并将其添加到class为"menu"的div元素中。
首先,通过`document.querySelector('.menu .category')`选择器获取到class为"menu"的div元素中class为"category"的子元素,并将其赋值给变量`category`。
接着,定义了一个包含一级菜单数据的数组`categoryData`,每个元素都是一个对象,包含一个属性`title`表示菜单的标题。
然后,使用`forEach`方法遍历`categoryData`数组中的每个元素,传入一个回调函数,回调函数的参数`e`表示当前元素,`i`表示当前索引。
在回调函数中,首先创建一个`div`元素作为一级菜单的标题元素,然后给该元素设置class属性为"title",并将当前元素的`title`属性值赋值给它的`innerHTML`属性。
接下来,创建一个`li`元素作为一级菜单的容器,并将标题元素添加到该`li`元素中。
最后,将该`li`元素添加到`category` div元素中,这样就实现了动态生成一级菜单并添加到页面中。
通过这段代码,可以根据给定的数据动态生成一级菜单,并将其添加到指定的父元素中。