querySelector选择子元素
时间: 2024-02-06 09:07:38 浏览: 27
querySelector() 方法用于选择文档中的第一个匹配指定选择器的元素。如果你需要选择所有匹配的元素,可以使用 querySelectorAll() 方法。下面是一个演示例子:
```javascript
// 选择class为"example"的第一个子元素
var element1 = document.querySelector(".example");
// 选择id为"example"的第一个子元素
var element2 = document.querySelector("#example");
// 选择name为"example"的第一个子元素
var element3 = document.querySelector("[name='example']");
// 选择标签名为"div"的第一个子元素
var element4 = document.querySelector("div");
console.log(element1);
console.log(element2);
console.log(element3);
console.log(element4);
```
这个例子中,querySelector() 方法根据不同的选择器选择了不同的子元素,并将结果打印到控制台上。
相关问题
querySelector选择元素的子元素
querySelector选择元素的子元素可以通过使用父元素的children属性进行获取。例如,使用querySelector选择到的元素fu,可以通过fu.children来获取该元素的所有子元素节点。 另外,可以使用下标来获取具体的子元素节点,例如ul.children可以获取到ul元素的第一个子元素节点。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [获取父元素节点和子节元素节点,以及通过下标获取子元素节点](https://blog.csdn.net/weixin_49833951/article/details/113644112)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]
document.querySelector通过ID获取子元素
可以使用document.querySelector方法通过ID获取子元素,示例代码如下:
HTML代码:
```
<div id="parent">
<div id="child">子元素</div>
</div>
```
JavaScript代码:
```
const childElement = document.querySelector('#parent #child');
console.log(childElement); // 输出<div id="child">子元素</div>
```
在上述代码中,我们首先使用了#parent #child选择器来获取ID为child的子元素,然后使用document.querySelector方法来获取该子元素的引用,并将其赋值给变量childElement。最后,我们通过console.log方法将该子元素输出到控制台。