深入探究querySelector使用方法

YBXU • 2024-10-03 23:42 • 编程

一、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的元素的颜色就会被修改为红色。

原创文章，作者：YBXU，如若转载，请注明出处：https://www.506064.com/n/131070.html