在JavaScript中獲取href和src屬性的原始值

Question

給定一個HTML元素，我想使用Javascript獲取其src屬性的原始值。

如果src值為相對路徑，則element.src返回絕對路徑。

例如：

我知道可以將HTML代碼作為字符串進行過濾，但這並不是很有效。

我正在尋找一種有效且干凈的方法來提取src / href屬性的原始值，給定具有HTML元素的屬性。

謝謝！

Answer 1

嘗試使用.getAttribute()

 const src = document.getElementById("test").getAttribute("src") console.log(src) // logs "/source"

 <img id="test" src="/source"/>

Answer 2

您正在將對象屬性與屬性值混淆。 僅使用getAttribute()什么問題？

 var element = document.getElementById('test'); console.log( element.href ); console.log( element.getAttribute('href') );

 <a href="test.html" id="test">Testy</a>

請注意， element.href由瀏覽器解析，而getAttribute()返回DOM中指定的原始字符串。 您也可以類似地對<img />元素使用getAttribute('src') 。

為了完整起見，這與jQuery中演示的行為相同。 大多數開發人員會以同義的方式使用它們，但實際上它們實際上有所不同。

例如：

 console.log( $('#test').prop('href') ); console.log( $('#test').attr('href') );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="test.html" id="test">Testy</a>

注意prop()行為方式與element.href相同，並且attr()與getAttribute()相同。