获取javascript中href和src属性的原始值答案

【问题标题】：Get the raw value of href and src attributes in javascript获取javascript中href和src属性的原始值
【发布时间】：2018-08-17 13:35:03
【问题描述】：

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

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

例如：

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

在给定具有属性的 HTML 元素的情况下，我正在寻找有效且干净的方法来提取 src/href 属性的原始值。

谢谢！

【问题讨论】：

【解决方案1】：

您将对象属性与属性值混淆了。只使用getAttribute() 有什么问题？

var element = document.getElementById('test');

console.log( element.href );
console.log( element.getAttribute('href') );

&lt;a href="test.html" id="test"&gt;Testy&lt;/a&gt;

请注意，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() 相同。

【讨论】：

【解决方案2】：

试试.getAttribute()

const src = document.getElementById("test").getAttribute("src")

console.log(src) // logs "/source"

&lt;img id="test" src="/source"/&gt;

【讨论】：