HTML DOM 返回文档中的链接数
2025-04-24
35
参考资料
HTML DOM 返回文档中的链接数
HTML DOM 返回文档中的链接数
简介
HTML DOM 提供了获取文档中链接数量的方法，主要通过 document.links 集合实现。
document.links 属性
返回文档中所有
<a>和<area>元素的集合只读属性
属于 HTMLCollection 类型
基本用法
// 获取文档中链接的总数 var linkCount = document.links.length;
完整实例
<!DOCTYPE html>
<html>
<head>
<title>链接数量统计</title>
<style>
/* CSS扩展 */
.link-counter {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="link-counter">
本页共有 <span id="count">0</span> 个链接
</div>
<a href="#section1">第一部分</a>
<a href="#section2">第二部分</a>
<a href="https://example.com">外部链接</a>
<area shape="rect" coords="0,0,50,50" href="page.html" alt="区域链接">
<script>
// 获取链接数量
var links = document.links;
var countElement = document.getElementById("count");
countElement.textContent = links.length;
// 遍历所有链接并添加高亮类
for (var i = 0; i < links.length; i++) {
links[i].classList.add("highlight");
}
</script>
</body>
</html>功能扩展
统计特定类型的链接:
// 统计外部链接数量
var externalLinks = Array.from(document.links).filter(link => {
return link.hostname !== window.location.hostname;
}).length;链接信息收集:
var linkInfo = Array.from(document.links).map(link => {
return {
text: link.textContent,
href: link.href,
target: link.target
};
});CSS扩展:
/* 为所有链接添加悬停效果 */
a:hover {
text-decoration: underline;
color: blue;
}
/* 为外部链接添加特殊样式 */
a[href^="http"]:not([href*="yourdomain.com"]) {
background-image: url(external-link-icon.png);
background-repeat: no-repeat;
padding-right: 15px;
} 