在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 代码作为字符串获取并对其进行过滤，但这效率不高。

我正在寻找高效、干净的方法来提取 src/href 属性的原始值，给定带有该属性的 HTML 元素。

谢谢！

Answer 1

您将对象属性与属性值混淆了。只使用

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()

相同。

Answer 2

尝试使用

.getAttribute()

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

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

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

Answer 3

获取脚本和链接标签的 src/href 值并控制台记录它们：

var scriptTags = document.querySelectorAll('[valuejs]');
scriptTags.forEach(tag => {
  console.log(tag.src);
})

var linkTags = document.querySelectorAll('[valuecss]');
linkTags.forEach(tag => {
  console.log(tag.href);
})

<script valuejs src="https://somejs.js"></script>

<link valuecss href="https://somecss.css" rel="stylesheet" />