JS 與瀏覽器的溝通與網頁事件處理

記錄〈[FE102] 前端必備：JavaScript〉相關筆記。

介面：如何改變介面

透過拿 DOM 改變介面：

選元素 document：

• .getElementsByTagName('div') / .querySelector('div')
• .getElementsByClassName('classname') / .querySelector('.classname')
• .getElementById('id') / .querySelector('#id')
  註： .querySelector() 只能選到第一個元素，若要選擇全部元素，需使用 .querySelectorAll()。

改變 CSS：

• 一次一次慢慢改：

  • element.style.paddingTop = '10px'
  • element.style['padding-top'] = '10px'
  • element.style.background = 'black'

• 動態加 class：

  1. 先寫 class
  2. element.classList.add('class')

• 移除 class：

  • element.classList.remove('class')

• 開關 class：

  • element.classList.toggle('class')

• 看選到的有沒有包含指定的 class：

  • classList.contains('class')

  lists.addEventListener('click', (e) => {
  if (e.target.classList.contains('todo__content')) {
    e.target.classList.toggle('todo__finished');
  }
  });
  

改變內容：

• innerText：改變文字內容（不會顯示 tag）
• innerHTML：把標籤中的東西全部拿出來
• outerHTML：連自己也抓下來

插入與刪除元素：

• appendChild

  1. 先建立元素：
     • createElement('div')
     • createTextNode('hehehe') // 純文字
  2. 再 append：
     • appendChild(div)

  var node = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
  

  取自〈HTML DOM appendChild() Method〉

• removeChild

  • 要刪掉元素要知道其 parents 是誰
  • element.removeChild(document.querySelector('parents'))

事件：如何監聽事件並做出反應

• eventListener 事件監聽

  document.querySelector('div').addEventListener('監聽的事件名稱', callbackFunction)
  

  當監聽事件發生時，瀏覽器就會觸發 callbackFunction。
• event(e)：利用此變數來拿到事件相關資訊

  document.querySelector('div').addEventListener('click', function(e) {
    // 可用 e.target 取得點到的元素
  })
  

網頁資料都存在哪

Cookie

• 是一個小型文字檔，會自動帶到伺服器。瀏覽器如果看到 server HTTP response header 的 set-cookie 就會設定 cookie。透過 cookie 可讓伺服器和瀏覽器溝通。
• 可運用在廣告追蹤、身分驗證上。
• By domain

local storage

• 如果資訊只需儲存在瀏覽器上，和伺服器較無關時使用。

• 加入 locat storage：

  function(){
    const value = document.querySelector('.text').value
    localStorage.setItem('text', value)
    // 瀏覽器提供的 api，前可加 window 可不加 
    // key, value 組合 只能存字串
  }
  

• 從 local storage 拿值

  window.localStorage.getItem('text')
  

session storage

• 和 local storage 很像，但有效期限較短，只存在在同個分頁還開起的時候，換新分頁或是關掉分頁再開時，儲存的資訊就會消失。
• 把上述程式碼的 localStorage 改成 sessionStorage。