學 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()：觸發事件的元素本身