JavaScript 操作語法

發表於 分類於
介紹 JavaScript 中重要的字符串和 DOM 元素操作語法，提升數據處理和 DOM 操作的能力，這些都是網頁開發中不可或缺的知識。

parseInt()字串轉數字

parseInt() 用於將字符串轉換為整數。以下是一些示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 轉換型別成功，如果變數開頭是數字後面是字串會取前面的數字
let a = '34';
console.log(typeof a); // string
console.log(typeof parseInt(a)); // number

let b = '50ertyetddgv';
console.log(parseInt(b)); // 50

let c = '0.55';
console.log(parseInt(c)); // 0

// 轉換型別錯誤，如果變數開頭是中英文字或特殊符號會出現 NaN
let d = 'ab34c';
console.log(parseInt(d)); // NaN

let e = '!99';
console.log(parseInt(e)); // NaN

toString() 數字轉字串方法

toString() 方法用於將數字轉換為字符串：

1
2
3
4
5
6
7
8
9
let a = 34;
console.log(typeof a); // number
console.log(typeof a.toString()); // string

let b = 50;
console.log(b.toString()); // "50"

let c = 0.55;
console.log(c.toString()); // "0.55"

toLowerCase() 字串轉小寫

使用 toLowerCase() 將字符串轉為小寫字母：

1
2
3
4
5
6
7
8
const str1 = 'This Is A Apple';
console.log(str1.toLowerCase()) // this is a apple

const str2 = '你好嗎 NICK';
console.log(str2.toLowerCase()) // 你好嗎 nick

const str3 = 'DFGd4eg@112dFHf~fHJTg';
console.log(str3.toLowerCase()) // dfgd4eg@112dfhf~fhjtg

toUpperCase() 字串轉大寫

使用 toUpperCase() 將字符串轉為大寫字母：

1
2
3
4
5
6
7
8
const str1 = 'this is a apple';
console.log(str1.toUpperCase()) // THIS IS A APPLE

const str2 = '你好嗎 Nick';
console.log(str2.toUpperCase()) // 你好嗎 NICK

const str3 = '@2f304ge4hgjur54!';
console.log(str3.toUpperCase()) // @2F304GE4HGJUR54!

JavaScript innerHTML & createElement difference

innerHTML 設定/取得標籤

innerHTML 特性可以清空標籤內的內容，並塞入自定義的內容：

1
2
3
4
5
6
7
<h1 class="titleClass">
  <a href="#">title</a>
</h1>
<script>
  var el = document.querySelector('.titleClass').innerHTML;
  console.log(el); // <a href="#">title</a>
</script>

innerHTML 搭配 for 迴圈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="list"></ul>
<script>
  var farms=[
    {
      farmer:'卡斯柏',
      dogs:['張母是','小白'],
    },
    {
      farmer:'老張',
      dogs:['欣欣'],
    },
  ]

  var el = document.querySelector('.list');
  var len = farms.length;
  var str = ''; // 累加用
  for(var i=0;i<len;i++){
    if(farms[i].dogs.length > 1){
      var content = `<li>第 ${i + 1} 農場的主人是 ${farms[i].farmer} ，她的寵物有 ${farms[i].dogs.length} 隻，分別叫做 ${farms[i].dogs}</li>`;
    }else{
      var content = `<li>第 ${i + 1} 農場的主人是 ${farms[i].farmer} ，她的寵物有 ${farms[i].dogs.length} 隻，叫做 ${farms[i].dogs}</li>`;
    }
    str+=content;
  }
  el.innerHTML = str;
</script>

結果如下：

  • 第 1 農場的主人是 卡斯柏 ，她的寵物有 2 隻，分別叫做 張母是,小白
  • 第 2 農場的主人是 老張 ，她的寵物有 1 隻，叫做 欣欣

createElement 新增 HTML 標籤

使用 createElement() 方法插入新的 HTML 標籤：

1
2
3
4
5
6
7
8
9
10
11
12
<h1 class="title">
  <em>title</em>
</h1>

<script>
// createElement() 插入 HTML 標籤
// appendChild 動態插入子節點
var str = document.createElement('em'); // 準備插入 em 標籤
str.textContent = '1234'; // em 標籤內容
// 目前 str = <em>1234</em>
document.querySelector('.title').appendChild(str);
</script>

結果如下：
createElement() 插入 HTML 標籤

createElement 搭配 for 迴圈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ul class="list"></ul>
<script>
  var farms=[
    {
      farmer:'卡斯柏',
      dogs:['張母是','小白'],
    },
    {
      farmer:'老張',
      dogs:['欣欣'],
    },
  ]

  var el = document.querySelector('.list');
  var len = farms.length;
  for(var i=0;i<len;i++){
    var str = document.createElement('li');
    if(farms[i].dogs.length > 1){
      str.textContent = `第 ${i + 1} 農場的主人是 ${farms[i].farmer} ，她的寵物有 ${farms[i].dogs.length} 隻，分別叫做 ${farms[i].dogs}`;
    }else{
      str.textContent = `第 ${i + 1} 農場的主人是 ${farms[i].farmer} ，她的寵物有 ${farms[i].dogs.length} 隻，叫做 ${farms[i].dogs}`;
    }
    el.appendChild(str);
  }
</script>

結果如下：

  • 第 1 農場的主人是 卡斯柏 ，她的寵物有 2 隻，分別叫做 張母是,小白
  • 第 2 農場的主人是 老張 ，她的寵物有 1 隻，叫做 欣欣

textContent 設定/取得標籤裡的內容

1
2
3
4
5
6
7
<h1 class="titleClass">
  <a href="#">title</a>
</h1>
<script>
  var el = document.querySelector('.titleClass a');
  console.log(el.textContent); // title
</script>

setAttribute 設定屬性

setAttribute('屬性', '修改成')，例如：

1
setAttribute('href', 'https://tw.yahoo.com/');

setAttribute 方法會清空原有屬性並設置新值，因此如果是 class，將變為單一個。

例如：

1
<div class="strId adwd">123456789</div>

在 JS 中使用：

1
2
var el = document.querySelector('.strId');
el.setAttribute('class', 'abc'); // 修改為單一 class

結果將變為：

1
<div class="abc">123456789</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .strId {
    color: red;
  }
</style>
<h1 class="titleClass">
  <a href="#">title</a>
</h1>
<div class="str">123456789</div>
<script>
  var el = document.querySelector('.titleClass a');
  var el2 = document.querySelector('.str');
  el.setAttribute('href', 'https://tw.yahoo.com/'); // 修改 a 連結
  el2.setAttribute('id', 'strId'); // 新增 id
</script>

結果如下：
JavaScript setAttribute

getAttribute 取得屬性

使用 getAttribute('屬性') 來取得元素的屬性，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
  .strId{
    color: red;
  }
</style>
<h1 class="titleClass">
  <a href="https://123.com">title</a>
</h1>

<script>
  var el = document.querySelector('.titleClass a').getAttribute('href')
  console.log(el) // https://123.com
</script>

classList.add() 新增 class

使用 classList.add() 方法新增一個或多個 class：

1
2
3
4
5
6
7
8
<div id="id" class="a1">請看 class name</div>

<script>
  // classList.add 新增
  document.getElementById("id").classList.add('a2');
  // classList.add 新增多筆
  // document.getElementById("id").classList.add('a2', 'a3', 'a4');
</script>

JavaScript classList.add

classList.remove() 移除 class

使用 classList.remove() 方法移除指定的 class：

1
2
3
4
5
6
7
8
<div id="id" class="a1 a2 a3">請看 class name</div>

<script>
  // classList.remove 移除
  document.getElementById("id").classList.remove('a1');
  // classList.remove 移除多筆
  // document.getElementById("id").classList.add('a2', 'a3', 'a4');
</script>

JavaScript classList.remove

classList.contains() 判斷 class

使用 classList.contains() 方法來判斷元素是否擁有指定的 class：

1
2
3
4
5
6
7
8
9
10
<div id="id" class="a1">請看 class name</div>

<script>
  // classList.contains 判斷是否有對應的 class
  if (document.getElementById("id").classList.contains('a1')){
    console.log('Yes');
  } else {
    console.log('No');
  }
</script>

JavaScript classList.contains

classList.toggle() 切換 class

classList.toggle() 方法可以切換指定的 class：

  • 沒有 a2 的時候：
1
2
3
4
5
6
<div id="id" class="a1">請看 class name</div>

<script>
  // classList.toggle 當有對應的 class 就移除，沒有就增加
  document.getElementById("id").classList.toggle('a2');
</script>

JavaScript classList.toggle example 1

  • 有 a2 的時候：
1
2
3
4
5
6
<div id="id" class="a1 a2">請看 class name</div>

<script>
  // classList.toggle 當有對應的 class 就移除，沒有就增加
  document.getElementById("id").classList.toggle('a2');
</script>

JavaScript classList.toggle example 2

classList 函數範例

自定義函數來處理 class 的新增、移除和判斷：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="id" class="a1 a3">請看 class name</div>

<script>
  function hasClass(el, className) {
    if (el.classList) {
      return el.classList.contains(className);
    } else {
      return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }
  }
        
  function addClass(el, className) {
      if (el.classList) {
        el.classList.add(className);
      } else if (!hasClass(el, className)) {
        el.className += " " + className;
      }
  }

  function removeClass(el, className) {
      if (el.classList) {
        el.classList.remove(className);
      } else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className=el.className.replace(reg, ' ');
      }
  }
  let el = document.getElementById('id')
  // 新增 a2
  addClass(el, 'a2')
  // 移除 a3
  removeClass(el, 'a3')
  // 判斷
  console.log(hasClass(el, 'a1')); // true
</script>

classList 函數範例