🔸attribute

🚧 under construction

🔰 JS ⟩ browser ⟩ DOM ⟩ types ⟩ Element ⟩ attribute

🚧

🔴 主題

• attributes

  • id

• attributes vs. properties

• data attributes

⭐️ 重點

HTML attributes are not case sensitive, but JavaScript property names are.

HTML attributes are usually strings with exceptions:

• when attribute is a boolean or numeric value.

• elem.style is an object (CSSStyleDeclaration).

• event handler attribute is function or null.

• convert HTML attribute name to JS property name:

 HTML attribute        JS property
--------------------------------------------
data-first-name=""    elem.dataset.firstName  // "data-" attribute

• exceptions

 HTML attribute    JS property
--------------------------------------------
 class=""          elem.className, elem.classList
 for=""            label.htmlFor
 value=""          input.defaultValue  // `input.value`: user's current input 
 --------------------------------------------

📘 手冊

• Element ⟩

  • .classList (DOMTokenList) - can add(), remove(), contains(), toggle() ...
  • HTMLElement ⟩

    • .style (CSSStyleDeclaration)

👥 相關

• CSS

• elem.attr()