【JS學習筆記】querySelector & getElementsByClassName

給自己開了一個坑,慢慢填吧哈哈。

  這個系列的文章畢竟是筆記,所以會用很淺顯易懂的方式來寫,為的是讓自己以後能看懂(不),如果有專業人士路過請見諒。至於發這篇文章主要是看了[JS30] Day02: JS and CSS Clock 產生了疑惑,所以研究了一番。

我看他抓 hour-hand class CSS是用querySelector,我就想為何不使用getElementsByClassName呢?於是我就把querySelector直接改成了 getElementsByClassName 如預期地,出現了錯誤。

這是原寫法:

const hourHand = document.querySelector('.hour-hand')

我直接改成了這樣:

const hourHand = document.getElementsByClassName('hour-hand');

上網Google了一下,才發現原來是回傳的問題。


定義

  querySelector() 匹配指定 CSS 選擇器的第一個元素。 如果沒有找到,返回 null。如果指定了非法選擇器則 丟擲 SYNTAX_ERR 異常。

比如下方這個範例會回傳 document 選到的第一個 “myclass” class

var el = document.querySelector(".myclass");

querySelector() 方法不只局限於 id 元素,使用此方法的方式要像 css 的方式一樣:

當選取 id 元素時:

document.querySelector('#test');

當選取 class 元素時:

document.querySelector('.test');

  而 getElementsByClassName() 方法以HTMLCollection對象的形式返回文檔中具有指定類名稱的所有元素的集合。可以通過索引號訪問節點。索引從0開始。

因此,我應該改為下方的代碼才對↓

const hourHand = document.getElementsByClassName('hour-hand')[0];

順帶補充 getElementsByClassName() 方法的一些基本用法:

1. 取得所有 class 為 “test” 的元素:

document.getElementsByClassName('test');

2.取得所有 class 為 “test” 和 “red” 的元素:

document.getElementsByClassName('red test');

3.取得所有在 id 為 ‘“main” 的元素裡 class 為 “test” 的元素:

document.getElementById('main').getElementsByClassName('test');

舉個栗子

getElementsByClassName

當我寫:

<body>
  <p class="test">Line1</p>
  <p class="test">Line2</p>
  <p class="test">Line3</p>
  <button onclick="myFunction()">測試</button>
</body>
<script>
  var length = document.getElementsByClassName('test').length;
  console.log(length);
</script>

回傳值為 3 。

若要抓第一個 class = “test” 的元素則應該寫為:

document.getElementsByClassName('test')[0]

來一段拙劣代碼↓

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p class="test">Line1</p>
    <p class="test">Line2</p>
    <p class="test">Line3</p>
    <button onclick="myFunction()">測試</button>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("test");
            x[0].innerHTML = "第一";
            x[1].innerHTML = "第二";
            x[2].innerHTML = "第三";
        }
    </script>
</body>
</html>

點按鈕後的效果↓

原本

Line1
Line2
Line3

變化

第一
第二
第三

querySelector

當我寫

<body>
  <ul>
    <li class="test">Line1</li>
    <li class="test">Line2</li>
    <li class="test">Line3</li>
  </ul>
  <button onclick="myFunction()">測試</button>
</body>
<script>
  function myFunction() {
    var x = document.querySelector('.test');
    x.textContent = 'hello';
  }
</script>

就會選中第一個test class 將Line1的字改為hello。

還有一個很有趣的是若選擇了兩個選擇器,那會怎麼辦?

<body>
<h2>第一個H2</h2>
<h2>第二個H2</h2>
<h3>第一個H3</h3>
<h3>第二個H3</h3>
<button onclick="myFunction()">測試</button>
</body>
<script>
        function myFunction() {
            var h = document.querySelector('h2,h3');
            h.textContent = 'H2,H3';
        }
 </script>

原本

第一個H2
第二個H2
第一個H3
第二個H3

變化

H2,H3
第二個H2
第一個H3
第二個H3

它會將第一個h2的文字改掉。

當我把h2,h3順序調換後,又是不一樣的結果。

<body>
<h3>第一個H3</h3>
<h3>第二個H3</h3>
<h2>第一個H2</h2>
<h2>第二個H2</h2>
<button onclick="myFunction()">測試</button>
</body>

原本

第一個H3
第二個H3
第一個H2
第二個H2

變化

H2,H3
第二個H3
第一個H2
第二個H2

總而言之,它會抓第一個找到的h2或h3標籤。

補充

query 選擇符選出來的元素是靜態的,而 getElement 這種方法選出的元素的動態的。這裡的靜態指的是選出的元素不會隨著文檔操作而改變。

詳細請閱讀:querySelector和getElementById方法的区别


querySelectorAll

  那如果想用 querySelector 抓很多個同樣的元素呢?可以用 querySelectorAll

  • querySelector() 方法選擇指定 CSS 選擇器的第一個元素。
  • querySelectorAll() 方法選擇指定的所有元素。

querySelectorAll有點像getElementsByClassName,會以陣列的方式被傳回。

假設我寫:

<h2 class="test">Line1</h2>
<h2 class="test">Line2</h2>
<h2 class="test">Line3</h2>

如果用querySelector只會將Line1改成123↓

document.querySelector('.test').textContent = '123';

而使用querySelectorAll可以抓到所有class為test的元素並傳回陣列

var k = document.querySelectorAll('.test'); 

因此可以分別修改文字:

k[0].textContent = '123';
k[1].textContent = '456';
k[2].textContent = '789';

原本

Line1
Line2
Line3

變化

123
456
789

參考

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論