What is the difference between properties and attributes in HTML?
Attributes are fixed values initialized in the HTML markup—<input type="text" value="Hello"> has type and value attributes. Properties are mutable fields present within the DOM's object representation of HTML elements, such as input.value. Attributes seed the initial settings, properties represent the live state. Upon initialization, attributes and properties might differ as a property change doesn't impact its HTML attribute counterpart.
Mirror, mirror on the Wall: Reflective and non-reflective properties
It's easy to believe attributes and properties are mirroring twins seeing similar names and initial values. But they've their own lives to live. For example, user input changes the value property of an input field but getAttribute('value') keeps holding onto its birth value unless explicitly updated.
Sometimes, these twins decide not to look alike at all. For instance, class attribute maps to className property, as class is a reserved word in JavaScript. Remember this trivia when scripting your way through HTML elements.
When jQuery joined the attribute-property party
Libraries like jQuery have blurred the boundaries between attributes and properties. With the advent of .prop() in jQuery 1.6.1, side-by-side with .attr(), making changes that respect an element's state like checking a checkbox was never easier.
Sticky notes from the Past: defaultValue and defaultChecked
The defaultValue and defaultChecked properties are life saviors if you prefer relishing the flavor of originality. No matter how value or checked properties alter, these stay unchanged. They're like history bookmarks in a constantly script-altered world.
Properties bouncers: Enforcing Standards
Ever tried changing the input's type attribute? If not, prepare for a surprise! DOM enforces HTML standards validating any mutation. Invalid changes? Denied entry or sent out, DOM is bouncer here!
Beyond Basics: More than what meets the eyes
Now, properties can play Sherlock, offering more than attributes can speak. Take style attribute. While it initiates styling, style property owns an object representing the element's live inline styles.
Wise Old Man: The HTML Specification
When dealing with these mysterious twins, keep the wise old man, the HTML specification, by your side. Understanding the governing rules of attribute-to-property reflection will make your developer life thrill-filled with fewer unwelcome shocks.
Was this article helpful?