obj.attr is the same as obj['attr'] but this is different from: obj.getAttribute('attr') e.g. for an svg obj.getAttribute('width') -> 400 obj.width -> SVGLength object EDIT: https://stackoverflow.com/questions/29929797/setattribute-doesnt-work-the-way-i-expect-it-to As I read that, it seems using element.attribute = value is the way to go. But e.g. for svg path 'd' element it doesn't work. I still dont' completely understand this. What are "nonstandard attributes" ? EDIT: I have a <path/> element, where I can assign p['data-xyz'] and reference it the same way. However, any 'data-xyz' attribute that is passed in through the xhtml source can only be accessed by getAttribute('data-xyz'). from: https://stackoverflow.com/questions/10280250/getattribute-versus-element-object-properties getAttribute('a') gets an attribute, while obj.a gets a property of the DOM object, often normalized from the original HTML attribute (which is a string). So they are not the same. Apparently custom attributes are not synced to the DOM, so always needs getAttribute. But then: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes data-foo -> el.dataset.foo Didn't work on the path elemnt. Maybe only on HTML, not SVG?