When code changes an element, DOM properties often update the corresponding attributes in the rendered HTML. For example, setting a paragraph’s `id` property changes its rendered `id` attribute. section 4.1.6
The correspondence is not universal: changing an input’s `value` property changes what appears in the field, but does not update the rendered `value` attribute. Read the current input value from its property. section 4.1.6
A DOM attribute setter can divide the work into three paths:
- Handle `class` separately, accepting either a class string or an array of class names. section 4.1.6
- Handle `style` separately by setting each supplied style property. section 4.1.6
- Route other names through a helper; the example uses DOM properties for ordinary names and `setAttribute()` for `data-` names. Remove attributes when their values are null. section 4.1.6
Listing 4.3 Setting the attributes of an element node (attributes.js)
export function setAttributes(el, attrs) {
const { class: className, style, ...otherAttrs } = attrs #1
if (className) {
setClass(el, className) #2
}
if (style) {
Object.entries(style).forEach(([prop, value]) => {
setStyle(el, prop, value) #3
})
}
for (const [name, value] of Object.entries(otherAttrs)) {
setAttribute(el, name, value) #4
}
}
// TODO: implement setClass
// TODO: implement setStyle
// TODO: implement setAttribute
The setter separates `class` and `style` from other properties, then delegates each path to a helper. section 4.1.6
