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

.srcはい、ドメインを追加しているのに、getAttributeがドメインを表示しないのはなぜですか? DOM オブジェクトの属性にアクセスするさまざまな方法の違いはどこにありますか?

Answer 1

getAttribute()HTML にあったものを正確に返します。相対 URL の場合があります。

.srcHTML に含まれていたものが相対 URL であっても、完全修飾絶対 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"

または、link タグを使用して:

<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

getAttribute()DOM 要素の正確な属性を返します。src は image 要素のインターフェースです。