---
# System prepended metadata

title: 1. querySelector 選取你的 HTML 類別元素
tags: [JavaScript - DOM 元素]

---

# 1. querySelector 選取你的 HTML 類別元素

- 如何使用 querySelector:

```
// HTML:

    <div class="testone"></div>
    <div class="testtwo"></div>
    <div class="testthree"></div>
    <div class="testfour"></div>
    <script src="js/all.js"></script>
```

- 縮短語法瀏覽的好方法:

  例如: 我們通常會 var one 然後接著寫:
  
```
var one = document.querySelector('.testone').one.textContent = '1. 富邦悍將';
```

### 太長了，反而會造成瀏覽上的不便利:

- 會建議寫到指定元素即可，接著參考以下的寫法:
  本節使用 querySelector 來改變 class 的文字範例:
```
var one = document.querySelector('.testone');
one.textContent = '1. 富邦悍將';

var two = document.querySelector('.testtwo');
two.textContent = '2. 中信兄弟';

var three = document.querySelector('.testthree');
three.textContent = '3. 樂天桃猿';
```







###### tags: `JavaScript - DOM 元素`