javascript - 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

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/

Answer 2

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

在 IDL 属性中反映内容属性中描述了 URL 的具体区别：

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

Answer 3

getAttribute()返回 DOM 元素的确切属性。而 src 是图像元素的接口。