一、queryselecter基础用法
querySelector能够快速地帮助我们获取DOM元素并进行相应的操作,下面是基础使用方法:
const element = document.querySelector(selector);
其中,selector可以是类名、id、标签名、属性等。比如,使用类名获取元素:
const element = document.querySelector('.my-class');
使用id获取元素:
const element = document.querySelector('#my-id');
使用标签名获取元素:
const element = document.querySelector('input');
使用属性获取元素:
const element = document.querySelector('[name="my-name"]');
值得注意的是,querySelector只能返回第一个匹配到的元素,如果想获取多个元素,可以使用querySelectorAll。
二、queryselecter结合CSS选择器使用
selector也可以使用CSS选择器,从而实现更加灵活的操作。
例如,获取class为my-class的div元素下的所有p元素:
const elements = document.querySelectorAll('.my-class p');
获取属性名为my-attr的input元素:
const element = document.querySelector('input[name="my-attr"]');
使用“>”可以选择某元素的后代元素,例如,获取id为my-id的div元素下的第一个p元素:
const element = document.querySelector('#my-id > p:first-child');
此外,也可以结合其他选择器使用,如下:
//选择第一个h1元素,并且它在class为my-class的div中
const element = document.querySelector('.my-class h1:first-of-type');
三、querySelector在for循环中的使用
对于一些DOM操作,我们需要遍历和查找元素,这时候可以在for循环中使用querySelector。比如,现在要把所有class为item的p元素的文本内容修改为“hello”:
const items = document.querySelectorAll('.item');
for(let i = 0; i < items.length; i++) {
const element = items[i].querySelector('p');
element.textContent = 'hello';
}
四、querySelector和事件监听
querySelector也可以用来帮助我们监听DOM事件。例如,现在想监听id为my-btn的按钮的点击事件:
const btn = document.querySelector('#my-btn');
btn.addEventListener('click', function(event) {
console.log('button clicked');
});
这样,当按钮被点击时,控制台就能输出“button clicked”。
五、querySelector和动态添加元素
querySelector也可以用来帮助我们动态添加元素。例如,在id为my-div的div元素里,插入一个p元素:
const div = document.querySelector('#my-div');
const p = document.createElement('p');
p.textContent = 'hello';
div.appendChild(p);
这样,该div元素就会添加一个p元素,且文本内容为“hello”。
六、querySelector和CSS样式修改
querySelector也可以用来帮助我们修改CSS样式。例如,现在要修改class为my-class的div元素的颜色:
const element = document.querySelector('.my-class');
element.style.color = 'red';
这样,该div元素的颜色就会被修改为红色。
七、结合queryselecterAll进行多元素操作
querySelectorAll可以选择多个元素,从而实现批量操作。例如,现在要将所有class为my-class的元素的颜色修改为红色:
const elements = document.querySelectorAll('.my-class');
for(let i = 0; i < elements.length; i++) {
elements[i].style.color = 'red';
}
这样,所有class为my-class的元素的颜色就会被修改为红色。