如何使用JavaScript获取任意HTML标签中的src属性值

你的HTML结构整理后如下：

<audio id="song">
  <source id="file-path" src="media/Kaattumalli.mp3" type="audio/mp3">
</audio>

一、将src值存入JavaScript变量 #

根据需求选择两种获取方式：

• 获取完整绝对URL：

const sourceElement = document.getElementById('file-path');
const fullAudioSrc = sourceElement.src;
// 结果示例："http://你的域名/media/Kaattumalli.mp3"

• 获取HTML中写的相对路径：

const sourceElement = document.getElementById('file-path');
const relativeAudioSrc = sourceElement.getAttribute('src');
// 结果："media/Kaattumalli.mp3"

二、提取文件名 #

拿到路径后，通过字符串操作即可提取文件名：

• 针对相对路径：

const fileName = relativeAudioSrc.split('/').pop();
// 结果："Kaattumalli.mp3"

• 针对完整URL：

const url = new URL(fullAudioSrc);
const fileName = url.pathname.split('/').pop();
// 结果同样为："Kaattumalli.mp3"

如果页面DOM是动态生成的，要确保代码在元素加载完成后执行，可将代码放在</body>标签前，或者用事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  // 此处放置上述获取代码
});

内容的提问来源于stack exchange，提问作者Ayyappan