[GH-ISSUE #6] [Add page] Element attributes #2

New Issue

2026-08-18T13:48:18Z

bendtherules commented

2026-08-18 13:48:18 +00:00

Originally created by @bendtherules on GitHub (Nov 10, 2020).
Original GitHub issue: https://github.com/bendtherules/UiQuestions/issues/6

Originally assigned to: @bendtherules on GitHub.

Covers -

class, classList, id
get/set/remove any attribute
Accessing most attributes directly like .value or .disabled
data attributes
(-) style

Details -

Attribute has the form name="value". Value is optional , so it can be just the attribute name - like <input required> which is same as required="".

Element.attributes - returns all attributes
Get/set - getAttribute(), setAttribute()
(-) Lower level - createAttribute(), setAttributeNode()
Remove - removeAttribute()
Check - hasAttribute()
(-) Boolean attributes - toggleAttribute()
Data attributes - using .dataset, maybe css access
Class, id - className, classList, id
(-) Inline styles - .style, CSSStyleDeclaration and camel-case names.

(-) means less used and Ok to skip

Originally created by @bendtherules on GitHub (Nov 10, 2020). Original GitHub issue: https://github.com/bendtherules/UiQuestions/issues/6 Originally assigned to: @bendtherules on GitHub. ## Covers - 1. class, classList, id 2. get/set/remove any attribute 3. Accessing most attributes directly like .value or .disabled 4. data attributes 5. (-) style ## Details - Attribute has the form `name="value"`. Value is optional , so it can be just the attribute name - like `<input required>` which is same as `required=""`. 1. [`Element.attributes`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) - returns all attributes Get/set - `getAttribute()`, `setAttribute()` (-) Lower level - `createAttribute()`, `setAttributeNode()` Remove - `removeAttribute()` Check - `hasAttribute()` (-) Boolean attributes - `toggleAttribute()` 2. Data attributes - using [`.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset), maybe [css access](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#CSS_access) 3. Class, id - [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className), [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) 4. (-) Inline styles - [`.style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style), [`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) and camel-case names. --- (-) means less used and Ok to skip

bendtherules added the add-page label 2026-08-18 13:48:18 +00:00

bendtherules referenced this issue

2026-08-18 13:48:20 +00:00

[PR #3] [MERGED] Added brief on DOM interfaces + func signatures + support hash link to notes #4

bendtherules referenced this issue

2026-08-18 13:48:20 +00:00

[PR #2] [MERGED] Changed var to let variable declarations #5

Sign in to join this conversation.