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

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

网址的具体差异在Reflecting content attributes in IDL attributes：

中有所描述

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

Answer 2

getAttribute()完全返回HTML中的内容。它可能是一个相对URL。

.src会返回一个完全限定的绝对网址，即使HTML中的内容是相对网址。

例如：

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

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

object.src和object.getAttribute（'src'）之间的区别

3 个答案: