遍歷節點、操作節點

Dom Family

插入節點

2者差別??

Node.appendChild()

list.appendChild(newItem)

Element.append()

刪除節點

parentElement.remove( NODE )
NODE.remove()

操作節點

Element.classList

HTML DOM Element classList

• 是唯獨屬性，return element 一個即時 class attributes 的DOMTokenList 。
• 可用來操作 class list.
• 使用 classList 屬性是取得元素 Class 的一種便利方式，也可以透過 element.className 來得到以空格分隔之 Class 清單字串。
• Element.classList方法:
  • .add( String [, String] )
  • .remove( String [,String] )
  • .item ( Number )
  • .toggle ( String [, force] )
  • .contains( String )

e.g.:
element.classList.contains('delete')
element.classList.toggle('chexked')

Element.matches

如果元素被指定的選擇器selectors字符串選擇，方法回傳 true; 否則回傳false。
Element.matches('selector')
element.matches('.checked')

NODE.className = 'string'

若樣式只有1個，可直接寫入。覆蓋原本class name

Element.tagName

read-only property 。 回傳HTML標籤名且都大寫。

< img > // IMG

相似用法

element.classList.contains('delete')
Element.matches('selector')

Number(value)
parseInt()