sync between attributes and properties #1579

dagolinuxoid · 2019-11-05T06:37:54Z

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 · 2019-12-01T13:20:11Z

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 · 2019-12-07T19:39:59Z

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 · 2019-12-07T20:19:15Z

Are you sure? Is that in the spec?

dagolinuxoid · 2019-12-08T12:11:10Z

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);

iliakan added the waiting for feedback label Dec 1, 2019

javascript-tutorial / en.javascript.info

sync between attributes and properties #1579

sync between attributes and properties #1579

dagolinuxoid commented Nov 5, 2019 •

edited

iliakan commented Dec 1, 2019

dagolinuxoid commented Dec 7, 2019

iliakan commented Dec 7, 2019

dagolinuxoid commented Dec 8, 2019

javascript-tutorial / en.javascript.info

Join GitHub today

GitHub is where the world builds software

sync between attributes and properties #1579

sync between attributes and properties #1579

Comments

dagolinuxoid commented Nov 5, 2019 • edited

iliakan commented Dec 1, 2019

dagolinuxoid commented Dec 7, 2019

iliakan commented Dec 7, 2019

dagolinuxoid commented Dec 8, 2019

Essential cookies

Always active

Analytics cookies

dagolinuxoid commented Nov 5, 2019 •

edited