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


Posted by yunanpan on 2020-08-24

記錄〈[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 headerset-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









Related Posts

MTR04_1127

MTR04_1127

CMD 常用指令

CMD 常用指令

設計API回傳/接收JSON

設計API回傳/接收JSON


Comments