javascript - "e.currentTarget.href"和 ".getAttribute(' href')"之间有什么区别？

Question

var a = document.querySelector("a");
console.log( a.href == a.getAttribute("href") ); //why false? (tested on chrome)

<a href="#hello">Link</a>

为什么输出为假？我的意思是，我知道 .href 返回整个 URL，而 .getAttribute() 仅返回实际写入 HTML 的部分，这就是为什么结果比较是错误的。 但我想知道这是否是根据规范应该如此以及为什么。另外，我想知道其他属性是否会发生这种情况。

Answer 1

该属性始终是完整 URL 的原因在于 specification :

href of type DOMString
The absolute URI [IETF RFC 2396] of the linked resource.

<小时/>

区别在于一个是属性 ( <a href="#hello"> )，另一个是属性 ( a.href )。属性等于标记中设置的任何值。该属性仅由属性初始化，但可以具有任何其他(“匹配”)值。不过，设置该属性会覆盖该属性，并且再次设置该属性会导致差异:

var a = document.querySelector('a');
a.href = a.href;
alert('Setting the property: ' + a.href + ' ' + a.getAttribute('href'));
a.setAttribute('href', '#goodbye');
alert('Setting the attribute: ' + a.href + ' ' + a.getAttribute('href'));

<a href="#hello">Link</a>

关于其他属性，例如<link>的href属性/属性元素的行为方式相同:

alert(document.getElementById('lnk').href);

<link id="lnk" type="text/css" rel="stylesheet" href="some.css"></link>