getAttribute（）与Element对象的属性？
像Element.getAttribute("id")和Element.id这样的expression式返回相同的东西。
当我们需要HTMLElement对象的属性时应该使用哪一个？
这些方法如getAttribute()和setAttribute()是否存在跨浏览器问题？
或直接访问对象属性与使用这些属性方法之间对性能的任何影响？
getAttribute检索一个DOM元素的属性 ，而el.id检索这个DOM元素的属性 。 他们不一样。
大多数情况下，DOM属性与属性同步。
但是，同步不保证相同的值 。 一个典型的例子是el.href和el.getAttribute('href')的锚元素。
例如：
<a href="/" id="hey"></a> <script> var a = document.getElementById('hey') a.getAttribute('href') // "/" a.href // Full URL except for IE that keeps '/' </script>
发生这种行为是因为根据W3C ，href属性必须是一个良好的链接。 大多数浏览器都尊重这个标准（猜猜谁不？）。
input的已checked属性还有另一种情况。 当属性返回string"checked"或一个空string时，DOM属性返回true或false 。
然后，有一些属性只能单向同步。 最好的例子是input元素的value属性。 通过DOM属性更改其值不会更改属性（编辑：检查更精确的第一个注释）。
由于这些原因，我build议你继续使用DOM 属性 ，而不是属性，因为它们在浏览器中的行为不同。
实际上，只有两种情况需要使用属性：
- 自定义HTML属性，因为它不同步到DOM属性。
- 要访问未从属性同步的内置HTML属性，并且您确定需要该属性（例如，
input元素的原始value）。
如果你想要更详细的解释，我强烈build议你阅读这个页面 。 它只会花你几分钟，但你会很高兴的信息（我在这里总结）。
getAttribute('attribute')通常以string的forms返回属性值，完全按照页面的HTML源代码定义。
但是， element.attribute可能会返回属性的标准化或计算值。 例子：
-
<a href="/foo"></a>- a.href将包含完整的 URL
-
<input type="checkbox" checked>- input.checked将是真（布尔）
-
<input type="checkbox" checked="bleh">- input.checked将是真（布尔）
-
<img src='http://dummyimage.com/64x64/000/fff'>- 图像加载之前， img.width将为0（数字）
- 当图像（或其前几个字节）被加载时，img.width将是64（数字）
-
<img src='http://dummyimage.com/64x64/000/fff' width="50%">- img.width将被计算的 50％
-
<img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>- img.width将是50（数字）
-
<div style='background: lime;'></div>- div.style将是一个对象
.id保存了函数调用开销。 （这是非常小的，但你问。）
根据这个jsPerftesting， getAttribute比id属性更慢。
PS
奇怪的是，这两个语句在IE8上的performance都很差（与其他浏览器相比）。
除非你有特定的理由不要使用这些属性。
- 在较旧的IE浏览器中，
getAttribute()和setAttribute()被打破了（在后来的版本中兼容模式） - 属性更方便（特别是对应于布尔属性的属性）
有一些例外 ：
- 访问
<form>元素的属性 - 访问自定义属性（尽pipe我不鼓励使用自定义属性）
我已经在SO上写了几个关于这个主题的文章：
尝试下面的例子来完全理解这一点。 对于下面的DIV
<div class="myclass"></div>
Element.getAttribute('class')将返回myclass但您必须使用Element.className从DOM属性中检索它。
一个区域，这是一个很大的区别是基于属性的CSS样式。
考虑以下几点：
const divs = document.querySelectorAll('div'); divs[1].custom = true; divs[2].setAttribute('custom', true);
div { border: 1px solid; margin-bottom: 8px; } div[custom] { background: #36a; color: #fff; }
<div>A normal div</div> <div>A div with a custom property set directly.</div> <div>A div with a custom attribute set with `setAttribute`</div>
