在JavaScript开发中，提取HTML脚本标签的src属性是常见需求，无论是做资源依赖分析、动态脚本加载判断还是页面性能优化，都需要准确获取所有脚本的src值。不同的DOM解析方法在效率和适用场景上存在差异，选择合适的方法能提升代码性能。
基础提取方法：querySelectorAll
最直观的方式是使用querySelectorAll方法选中所有<script>标签，然后遍历获取src属性。这种方法代码简洁，适合大多数常规场景。
// 获取所有script标签
const scriptElements = document.querySelectorAll('script');
// 存储提取到的src属性
const srcList = [];
// 遍历节点获取src
scriptElements.forEach(script => {
// 排除没有src属性的内联脚本
if (script.src) {
srcList.push(script.src);
}
});
console.log('提取到的src列表:', srcList);
方法优缺点分析
- 优点：代码量少，逻辑清晰，兼容性好，支持所有现代浏览器
- 缺点：返回的是静态NodeList，如果后续页面动态添加了新的
<script>标签，需要重新执行查询
高效遍历方法：getElementsByTagName
如果需要频繁获取脚本标签，或者对性能要求更高，可以使用getElementsByTagName方法，它返回的是动态HTMLCollection，遍历效率比querySelectorAll更高。
// 获取所有script标签，返回动态集合
const scriptCollection = document.getElementsByTagName('script');
const srcList = [];
// 遍历集合，注意使用length缓存避免动态集合长度变化的问题
for (let i = 0, len = scriptCollection.length; i < len; i++) {
const src = scriptCollection[i].src;
if (src) {
srcList.push(src);
}
}
console.log('提取到的src列表:', srcList);
动态集合的注意事项
因为getElementsByTagName返回的是动态集合，当页面新增<script>标签时，集合会自动更新，但遍历时如果不缓存长度，可能会出现漏遍历或者多遍历的问题，所以建议先缓存集合长度再遍历。
处理动态添加的脚本标签
如果页面中存在动态插入的<script>标签，需要在标签插入后提取src，可以结合MutationObserver监听DOM变化，实时获取新增的脚本标签src。
// 存储所有提取到的src
const allSrcList = [];
// 先获取初始已有的脚本src
const initialScripts = document.getElementsByTagName('script');
for (let i = 0, len = initialScripts.length; i < len; i++) {
if (initialScripts[i].src) {
allSrcList.push(initialScripts[i].src);
}
}
// 创建MutationObserver监听body下的子节点变化
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
// 判断新增节点是否为script标签
if (node.nodeName === 'SCRIPT' && node.src) {
allSrcList.push(node.src);
}
});
});
});
// 开始监听
observer.observe(document.body, { childList: true, subtree: true });
console.log('初始src列表:', allSrcList);
不同方法对比
以下是几种常用方法的对比，方便开发者根据场景选择：
| 方法 | 返回类型 | 性能 | 适用场景 |
|---|---|---|---|
| querySelectorAll('script') | 静态NodeList | 中等 | 一次性提取，不需要处理动态新增标签 |
| getElementsByTagName('script') | 动态HTMLCollection | 较高 | 需要多次获取，或者关注动态新增的脚本标签 |
| MutationObserver + 遍历 | 实时更新数组 | 低（监听开销） | 需要实时捕获动态插入的脚本标签 |
提取时的注意事项
- 内联脚本没有src属性，提取时需要先判断
script.src是否存在，避免将空值存入结果 - 如果脚本标签的src是相对路径，
script.src会返回完整的绝对路径，不需要额外处理路径转换 - 对于跨域加载的脚本，src属性依然可以正常获取，不受同源策略限制
根据实际需求选择合适的方法，就能高效完成HTML脚本标签src属性的提取工作，避免不必要的性能损耗。
JavaScriptDOM解析script标签src属性提取修改时间：2026-06-27 16:57:54