JS 筆記 - querySelector、setAttribute 用法

前面學過 textContent 使用方法，如何用更簡短且易讀的程式碼來控制網頁元素？

透過變數管理相同的程式碼

原本要控制 id 的寫法都會是：

document.getElementById("nameId").textContent = value;

但可以這樣寫會更易讀且未來維護也更便利：

var el = document.getElementById("nameId");
//建立一個變數，將原本要控制的條件用變數來管理
el.textContent = value;
//透過變數管理的程式碼，後面加上需要的屬性，就能更快得到所要的值

在網頁 id 是唯一性，不可以同時存在兩種相同的 id 名稱

---

querySelector 選擇單一元素

跟上方的寫法很像，是這樣寫的：

var el = document.querySelector(".titleClass");
//不只可以選擇 id，也可以選擇 class
el.textContent = value;
//透過變數管理的程式碼，後面加上需要的屬性，就能更快得到所要的值

若只有選擇單一元素，可以使用此語法。
多個 class 若用此語法時，只會存取第一個 Class 內的資料。

codepen: https://codepen.io/hnzxewqw/pen/JjdRojN

---

querySelectorAll 重複選取多個元素

與上方寫法一樣，只是選擇屬性不同：

var el = document.querySelectorAll(".titleClass em");
//不只可以選擇 id，也可以選擇 class 裡面的多個選項。
el.textContent = value;
//透過變數管理的程式碼，後面加上需要的屬性，就能更快得到所要的值

若有多個重複的元素要選擇，可以使用此語法。

通常會搭配陣列與迴圈使用：

var el = document.querySelectorAll(".titleClass em");
//不只可以選擇 id，也可以選擇 class。
console.log(el); //結果會得到陣列的值
el[0].textContent = "123";
el[1].textContent = "456";

倘若不知道抓取的資料有多少，就使用迴圈依序來抓取資料

var el = document.querySelectorAll(".titleClass em");
//不只可以選擇 id，也可以選擇 class。
console.log(el); //結果會得到陣列的值

el[0].textContent = "123";
el[1].textContent = "123";

var elTotal = el.length;
//抓取 elTotal 的數值總長度

for (i = 0; i < elTotal; i++) {
  el[i].textContent = i + "123";
}
//會得到結果是
//0123
//1123

codepen: https://codepen.io/hnzxewqw/pen/dyopPGd

---

setAttribute 增加標籤屬性

透過 JavaScript 增加 HTML 標籤屬性，例如要動態加上一個 a 連結，可以這樣寫：
先在 HTML 新增一個 class，

<div class="titleClass">
  <a href="#">Link</a>
</div>
<script src="js/practice1.js"></script>

JS 動態新增標籤屬性

var el = document.querySelector(".titleClass"); //選擇單一元素為 HTML 裡的 class 名稱為 titleClass
el.setAttribute("href", "www.facebook.com"); //前面是屬性，後面是內容

這樣就可以透過 JS 新增一個連結到 HTML

---

動態新增 id 來操控 HTML

<div class="str">title</div>
<script src="js/practice1.js"></script>

在 CSS 動態新增 id

#strId {
  color: blue;
  font-size: 18px;
}

透過 JS 來操控

var elStr = document.querySelector(".str"); //選擇單一元素為 HTML 的 class 名稱為 str
elStrt.setAttribute("id", "strId"); //因為在 CSS 有動態新增一個 id，所以選擇新增的 id 屬性來控制他的值(會帶回 CSS 的設定內容)

結語

querySelector 可以選擇 Class 變得相當方便與高彈性，是很好用的語法。