學 JavaScript 的那些筆記 4--瀏覽器的 JS


  • DOM 是甚麼 ? -- 可以把 html 轉為物件形式,讓他可以跟瀏覽器溝通

一些跟瀏覽器溝通的東西

  • getElementsByTagName(''): 選取對應標籤名稱的元素
    ex. getElementByTagName('div')
  • getElementsByClassName(''): 選取對應class名稱的元素
    ex. getElementByClassName('block') (不用有點.)
  • getElementById('')*: 選取對應id名稱的元素(id只有一個,所以 Element 不加s)
  • querySeletor('')*: css 選擇器,用 css 的寫法去選擇元素(只能選到一第一個)
    ex.querySeletor('.block') (css怎麼寫就怎麼寫,最直覺)
  • querySeletorAll('')*: css 選擇器,用 css 的寫法去選擇所有對應的元素(可以選到全部)
  • .getAttribute(''):取得屬性
    ex. 選取元素時用元素的屬性去選 e.target.getAttribute('data-value')

一些變動 CSS 的方法

* element.style.css的屬性 = ' ' (不建議用會很亂)
ex. element.style.padding = '10px' 或是 element.style['padding']

  • element.classList.add(' '): 添增 class 在元素上(先寫好 class 的 CSS就可以讓元素添加 css)
    ex. element.classList.add('.block')
  • element.classList.remove(' '): 移除在元素上原本的 class
  • element.classList.toggle(' '): 切換元素上的 class
  • element.closest(''):離元素最近的某個東西
    ex. e.target.closest('.row') 離目標元素最近的 .row 的東西

一些 html 的東西

  • element.innerHTML:所選元素標籤裡面的所有 html 的部分
  • element.innerText = ' ':標籤裡面所以文字的部分
  • element.outerHTML:包含所選元素的標籤的所有 html 的部分
  • element.appendChild():在元素上的子元素上添加東西
  • element.removeChild():移除元素的字元素的東西
  • document.createElement(''):建立元素
  • document.createTextNode(''):建立文字

一些事件的東西

  • element.addEventListener('動作', function):事件監聽 (function 可以另外先寫好,也可以寫在裡面變成匿名函式)
    ex. element.addEventListener('click', onClick)
  • e.preventDefault():阻止預設的動作
  • element.contains(''):event delegation 事件代理
    ex. e.target.classList.contains('btn')
  • e.currentTarget():觸發事件的 eventListener 所屬元素
  • e.target():觸發事件的元素本身
#Web #javascript #DOM






Related Posts

Day07:V8 bytecode 系列文總結

Day07:V8 bytecode 系列文總結

常用的內建函式

常用的內建函式

webpack 新手教學之淺談模組化與 snowpack

webpack 新手教學之淺談模組化與 snowpack



Sponsored



Comments