object.src 和 object.getAttribute('src') 的区别答案

【问题标题】：Difference between object.src and object.getAttribute('src')object.src 和 object.getAttribute('src') 的区别
【发布时间】：2013-11-02 21:48:32
【问题描述】：

所以，这里是一个示例 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 对象中属性的不同方式之间的区别？

【问题讨论】：

标签： javascript html dom

【解决方案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/

【讨论】：

另外，对属性执行 URL 转义，例如<img src="my image.jpg"> 产生类似 img.src === "https://domain.tld/my%20image.jpg" 和 img.getAttribute("src") === "my image.jpg" 的东西。有关示例，请参见 Onclick Image button - Logic not making sense。

【解决方案2】：

您可以将in the HTML specification 的区别视为“允许的属性”与“DOM 接口”。

URL 的具体区别在Reflecting content attributes in IDL attributes:

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

【讨论】：

此处被称为“HTML 规范”的文档是一个未维护且过时的工作草案。引用的另一份文件是另一份工作草案（已有一年多的历史），已被较新的草案和候选建议取代了数次。
@JukkaK.Korpela：谢谢。我不认为它改变了，我找不到第二个的最新版本，现在推荐 Web 平台。嗯。

【解决方案3】：

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

【讨论】：