在JavaScript中获取href和src属性的原始值

Question

给出一个HTML元素，我想使用Javascript获取其src属性的原始值。

如果src值是相对路径，则element.src返回绝对路径。

例如：

1. // ssss.com ==> http（s）：//ssss.com

2. blabla ==> http（s）：//ssss.com/path/blabla

我知道可以将HTML代码作为字符串获取并对其进行过滤，但这并不高效。

考虑到具有HTML元素的属性，我正在寻找一种有效且干净的方法来提取src / href属性的原始值。

谢谢！

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中指定的原始字符串。您也可以类似地将getAttribute('src')用于<img />元素。

出于完整性考虑，这与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()相同。