参考资料

  1. HTML DOM对单个单元格的内容水平对齐
  2. HTML DOM 返回文档的完整的URL实例
  3. HTML DOM 被按下的键盘键的keycode？
  4. HTML DOM 改变iframe的高度和宽度
  5. HTML DOM 哪个事件发生了？
  6. HTML DOM 提交表单
  7. HTML DOM 对iframe排版
  8. HTML DOM document.write() 方法

HTML DOM 返回页面上所有相对链接的基链接 实例

# HTML DOM 获取页面上所有相对链接的基链接

## 概述

在HTML中，相对链接是基于`<base>`标签或当前文档URL解析的。本文将详细介绍如何使用DOM获取页面上所有相对链接的基链接(base URL)，并提供相关实例和扩展功能。

## `<base>` 标签介绍

`<base>`标签定义了页面中所有相对URL的基准URL。一个文档中只能有一个`<base>`元素，它必须位于`<head>`部分。

```html
<head>
    <base href="https://www.example.com/" target="_blank">
</head>
```

- `href`属性指定基准URL
- `target`属性指定默认打开方式（可选）

## 获取基链接的方法

### 1. 获取文档的基链接

```javascript
// 获取文档中定义的<base>标签的href属性
const baseHref = document.querySelector('base')?.href || window.location.href;

// 或者使用DOM API
const baseElement = document.getElementsByTagName('base')[0];
const baseUrl = baseElement ? baseElement.href : document.URL;
```

### 2. 获取所有相对链接并转换为绝对链接

```javascript
function getAllRelativeLinks() {
    const baseUrl = document.querySelector('base')?.href || window.location.href;
    const base = new URL(baseUrl);
    const links = document.querySelectorAll('a[href^="./"], a[href^="../"], a[href^="/"]');
    
    return Array.from(links).map(link => {
        try {
            return new URL(link.href, base).href;
        } catch {
            return null;
        }
    }).filter(Boolean);
}

const absoluteLinks = getAllRelativeLinks();
console.log(absoluteLinks);
```

## 完整实例

```html
<!DOCTYPE html>
<html>
<head>
    <title>相对链接处理示例</title>
    <base href="https://www.example.com/base/">
</head>
<body>
    <h1>相对链接示例</h1>
    
    <a href="page1.html">相对链接1</a>
    <a href="/page2.html">根相对链接</a>
    <a href="../page3.html">上级目录链接</a>
    <a href="https://www.othersite.com/page4.html">绝对链接</a>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取基准URL
            const baseElement = document.querySelector('base');
            const baseUrl = baseElement ? baseElement.href : window.location.href;
            console.log('基准URL:', baseUrl);
            
            // 获取所有相对链接并转换为绝对URL
            const links = document.querySelectorAll('a');
            links.forEach(link => {
                if (!link.href.startsWith('http')) {
                    const absoluteUrl = new URL(link.href, baseUrl).href;
                    console.log(`相对链接: ${link.href} → 绝对URL: ${absoluteUrl}`);
                }
            });
        });
    </script>
</body>
</html>
```

## CSS扩展：为相对链接添加样式

可以使用CSS属性选择器为相对链接添加特殊样式，方便用户识别：

```css
/* 为所有相对链接添加样式 */
a[href^="./"], 
a[href^="../"], 
a[href^="/"] {
    border-left: 3px solid #ff9800;
    padding-left: 5px;
    background-color: #fff8e1;
}

/* 为没有明确target属性的相对链接添加样式 */
a[href^="./"]:not([target]), 
a[href^="../"]:not([target]), 
a[href^="/"]:not([target]) {
    background-color: #ffecb3;
}

/* 鼠标悬停效果 */
a[href^="./"]:hover, 
a[href^="../"]:hover, 
a[href^="/"]:hover {
    text-decoration: underline wavy;
}
```

## 实用功能扩展

### 1. 验证所有链接是否有效

```javascript
async function checkLinks() {
    const links = document.querySelectorAll('a');
    const baseUrl = document.querySelector('base')?.href || window.location.href;
    
    for (const link of links) {
        const url = new URL(link.href, baseUrl).href;
        
        try {
            const response = await fetch(url, { method: 'HEAD' });
            if (!response.ok) {
                link.style.border = '2px solid red';
                console.warn(`无效链接: ${url}`);
            }
        } catch (error) {
            link.style.border = '2px solid red';
            console.error(`无法访问的链接: ${url}`, error);
        }
    }
}

// 注意: 由于CORS限制，此功能可能无法检查跨域链接
```

### 2. 批量修改相对链接

```javascript
function updateRelativeLinks(newBaseUrl) {
    const links = document.querySelectorAll('a[href^="./"], a[href^="../"], a[href^="/"]');
    
    links.forEach(link => {
        const absoluteUrl = new URL(link.href, newBaseUrl).href;
        link.href = absoluteUrl;
    });
    
    // 更新或添加base标签
    let baseElement = document.querySelector('base');
    if (!baseElement) {
        baseElement = document.createElement('base');
        document.head.appendChild(baseElement);
    }
    baseElement.href = newBaseUrl;
}
```

## 注意事项

1. 如果页面没有`<base>`标签，浏览器会使用当前文档的URL作为基准
2. 使用`new URL()`构造函数可以正确处理相对路径的解析
3. 跨域链接检查可能受到浏览器安全策略的限制
4. 修改`<base>`标签会影响页面上的所有相对URL，包括图片、脚本等

通过以上方法，您可以有效地处理页面中的相对链接，并根据需要进行转换、验证或样式化。

AIGEO优化摘要

AI可读摘要：# HTML DOM 获取页面上所有相对链接的基链接 ## 概述 在HTML中，相对链接是基于``标签或当前文档URL解析的。本文将详细介绍如何使用DOM获取页面上所有相对链接的基链接(base URL)，并提供相关实例和扩展功能。 ## `` 标签介绍 ``标签定义了页面中所有相对URL的基准URL。一个文档中只能有一个...
常见问题：
HTML DOM 返回页面上所有相对链接的基链接 实例主要讲了什么？

# HTML DOM 获取页面上所有相对链接的基链接 ## 概述 在HTML中，相对链接是基于``标签或当前文档URL解析的。本文将详细介绍如何使用DOM获取页面上所有相对链接的基链接(base URL)，并提供相关实例和扩展功能。 ## `` 标签介绍 ``标签定义了页面中所有相对URL的基准URL。一个文档中只能有一个...

HTML DOM 返回页面上所有相对链接的基链接 实例适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 返回页面上所有相对链接的基链接 实例时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：55/100
  • 描述建议补足到50-220个字。
  • 建议补充封面或内容图片。
  • 建议补充标签，帮助识别主题边界。
作者：王壹杰
时间：2025-04-24 17:18:58
来源：https://html.ciilii.com/