getAttribute('attribute') normally returns the attribute value as a string, exactly as defined in the HTML source of the page.
However, element.attribute could return a normalized or calculated value of the attribute. Examples:
<a href="/foo"></a>
a.href will contain full URL
<input type="checkbox" checked>
input.checked will be true (boolean)
<input type="checkbox" checked="bleh">
input.checked will be true (boolean)
<img src='http://dummyimage.com/64x64/000/fff'>
img.width will be 0 (number) before the image is loaded
img.width will be 64 (number) when image (or first few bytes of it) is loaded
<img src='http://dummyimage.com/64x64/000/fff' width="50%">
img.width will be the calculated 50%
<img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
img.width will be 50 (number)
<div style='background: lime;'></div>
div.style will be an object
attributes
