深入探究querySelector使用方法

一、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的元素的顏色就會被修改為紅色。