iT邦幫忙

0

從 0 學習 JavaScript 筆記-querySelector、setAttribute 用法

https://ithelp.ithome.com.tw/upload/images/20191209/201193002t4aoiwMLe.jpg

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

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

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

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

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

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

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


querySelector 選擇單一元素

跟上方的寫法很像,是這樣寫的:

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

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


querySelectorAll 重複選取多個元素

與上方寫法一樣,只是選擇屬性不同:

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

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

通常會搭配陣列迴圈使用:

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

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

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

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

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

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

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 變得相當方便與高彈性,是很好用的語法。


尚未有邦友留言

立即登入留言