document.querySelector()获取当前标签
时间: 2024-02-06 11:07:24 浏览: 23
`document.querySelector()`方法用于获取文档中与指定选择器或选择器组匹配的第一个元素。它返回一个元素对象,如果没有匹配的元素,则返回`null`。
以下是一个使用`document.querySelector()`方法获取当前标签的示例:
```javascript
const currentTag = document.querySelector(".current");
console.log(currentTag); // 输出匹配的第一个元素对象
```
在上面的示例中,我们使用选择器`.current`来获取具有`current`类的元素。如果有多个元素匹配选择器,`document.querySelector()`方法只返回第一个匹配的元素。
相关问题
``` let box = document.querySelector('div'); ```
这行代码使用了JavaScript的DOM操作,用于获取文档中第一个匹配选择器的元素。
- `let` 是用于声明变量的关键字,这里声明了一个名为 `box` 的变量。
- `document` 是JavaScript中表示当前文档的对象。
- `querySelector()` 是 `document` 对象的方法,用于根据指定的选择器获取文档中的元素。
- `'div'` 是一个选择器,表示要获取的元素是 `<div>` 标签。
综上所述,这行代码的作用是获取文档中第一个 `<div>` 元素,并将其赋值给变量 `box`。
// 获取按钮组 var btnGroup = document.querySelector(".layui-btn-group"); // 获取按钮列表 var btnList = btnGroup.querySelectorAll(".layui-btn"); // 给每个按钮添加点击事件 btnList.forEach(function(btn) { btn.addEventListener("click", function() { // 先将所有按钮的背景色去掉 btnList.forEach(function(b) { b.classList.remove("active"); }); // 给当前点击的按钮加上背景色 this.classList.add("active"); }); }); 你这没生效啊
对不起,代码没有完整的包含在 `<script>` 标签中,这可能是导致代码无法生效的原因。以下是完整的代码,您可以尝试在您的代码中使用它:
```html
<div class="layui-btn-group">
<button type="button" class="layui-btn">横排</button>
<button type="button" class="layui-btn">竖排</button>
</div>
<script>
// 获取按钮组
var btnGroup = document.querySelector(".layui-btn-group");
// 获取按钮列表
var btnList = btnGroup.querySelectorAll(".layui-btn");
// 给每个按钮添加点击事件
btnList.forEach(function(btn) {
btn.addEventListener("click", function() {
// 先将所有按钮的背景色去掉
btnList.forEach(function(b) {
b.classList.remove("active");
});
// 给当前点击的按钮加上背景色
this.classList.add("active");
});
});
</script>
<style>
.layui-btn.active {
background-color: #009688;
color: #fff;
}
</style>
```
上述代码中,我将 CSS 样式(`.active` 类)和 JavaScript 代码都包含在了 `<script>` 标签中,同时将样式放在了 `<style>` 标签中。如果您把这段代码放在 HTML 文件中,应该是可以生效的。