如何从DOM获取文档head中外部CSS与JavaScript的URL？

没问题！要提取HTML head标签里加载的外部JS和CSS文件URL，用浏览器的DOM API就能轻松实现，不管是临时在控制台查看，还是写脚本自动化处理都适用。我给你分情况说明：

提取外部JavaScript文件URL #

我们可以通过选择器定位到head标签内所有带有src属性的script标签，然后提取它们的src值：

// 第一步：选中head里所有带src属性的script标签
const externalScripts = document.querySelectorAll('head script[src]');

// 第二步：把NodeList转成数组，提取每个script的src属性
const jsUrls = Array.from(externalScripts).map(script => script.src);

// 输出结果，比如你例子里的/path/somewhere/script.js会被转成完整URL（如果是相对路径的话）
console.log(jsUrls);

如果你想获取标签里写的原始相对路径（而不是浏览器解析后的绝对URL），可以用getAttribute('src')代替script.src：

const jsRelativePaths = Array.from(externalScripts).map(script => script.getAttribute('src'));
console.log(jsRelativePaths); // 直接输出/path/somewhere/script.js

提取外部CSS文件URL #

类似地，我们定位head里所有rel="stylesheet"且带有href属性的link标签：

// 第一步：选中head里的外部样式表标签
const externalStyles = document.querySelectorAll('head link[rel="stylesheet"][href]');

// 第二步：提取href属性值
const cssUrls = Array.from(externalStyles).map(link => link.href);

console.log(cssUrls); // 输出完整的CSS文件URL

同样，如果要原始相对路径，用getAttribute('href')：

const cssRelativePaths = Array.from(externalStyles).map(link => link.getAttribute('href'));
console.log(cssRelativePaths); // 输出/path/somewhere/styles.css

小提示 #

如果页面存在动态加载的JS/CSS（比如通过脚本后续插入到head里的），记得要等页面完全加载完成再执行提取代码，比如绑定DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', () => {
  // 这里放上面的提取代码
});

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