object.src和object.getAttribute('src')之间的区别

Question

所以,这是一个示例HTML代码:

<img src="test.png" id="test">

这是一个Javascript代码:

element = document.getElementById('test');
alert(element.getAttribute('src')); --> test.png
alert(element.src); --> domain.com/test.png

为什么getAttribute不会显示域名,而.src是的,它会添加域名？在哪里可以找到访问DOM对象中属性的不同方法之间的区别？

Answer 1

您可以将HTML规范中的差异视为"允许的属性"与"DOM接口".

在IDL属性中反映内容属性中描述了URL的具体差异:

如果反射IDL属性是DOMString其内容属性定义为包含URL的属性,则在获取时,IDL属性必须解析相对于元素的content属性的值,并返回结果绝对URL(如果成功),或者否则为空字符串; 在设置时,必须将content属性设置为指定的文字值.如果content属性不存在,则IDL属性必须返回默认值(如果content属性有一个),否则返回空字符串.

Answer 2

getAttribute()确切返回HTML中的内容。它可能是相对URL。

.src 返回完全限定的绝对URL，即使HTML中的内容是相对URL。

例如：

<img id="myImage" src="foo.jpg">

var img = document.getElementById("myImage");
var src1 = link.getAttribute("src")  ;    // "foo.jpg"
var src2 = link.src;                      // "http://mydomain.com/path/foo.jpg"

或者，使用链接标记：

<a id="myLink" href="foo.html">

var link = document.getElementById("myLink");
var src1 = link.getAttribute("href");    // "foo.html"
var src2 = link.href;                     // "http://mydomain.com/path/foo.html"

链接标记的工作演示：http : //jsfiddle.net/jfriend00/EXYjb/