sync between attributes and properties

[dagolinuxoid]

But there are exclusions, for instance input.value synchronizes only from attribute → to property, but not back:

I don't know is it worth or not to mention (as a side note) that the sync between attributes and properties is not going to happen after a property is assigned directly. Example

let inp = document.getElementById('search');
inp.setAttribute('value','initialValue');
inp.value === 'initialValue'; //true
inp.setAttribute('value','changedValue via setAttribute');
inp.value === 'changedValue via setAttribute'; // true;
inp.value = 'cancel all consecutive attempts to sync via setAttribute';
inp.value === 'cancel all consecutive attempts to sync via setAttribute'; // true
inp.setAttribute('value','has no effect on input.value');
inp.value === 'has no effect on input.value'; // false
inp.value === 'cancel all consecutive attempts to sync via setAttribute'; // true

go to the website

[iliakan]

You give so many code lines =)

What you'd like to add? There's a note about syncing properties that it happens one way sometimes.

[dagolinuxoid]

Probably it's best to keep it as it is. I just wanted to say that:

after changing a property, further manipulation on a corresponding attribute has no effect on the property.

[iliakan]

Are you sure? Is that in the spec?

[dagolinuxoid]

It's just my observation. I hope it is more clear than my previous example.

let's say we have the html

<input id='field' value='initial'/>

And the js

const field = document.getElementById('field');
console.log(field.value); // initial

// there is no sync here: I only change a value property, value attr is still intact
field.value='further altering a value attr has no effect on the value property'; 

console.log(field.getAttribute('value')); // 'initial'

field.setAttribute('value', "I can't change the value property by setting a value attr")

// further altering a value attr has no effect on the value property
console.log(field.value);