HTML DOM links 集合

Links 集合的概述

在 HTML DOM 中，链接元素被表示为一个集合，即 Links 集合。这个集合包含了页面中所有的链接元素，我们可以通过这个集合来获取和操作链接元素的属性和方法。

Links 集合的常用属性和方法

常用属性

1. length：获取 Links 集合中链接元素的数量。
2. item(index)：根据索引获取 Links 集合中的链接元素。
3. namedItem(name)：根据链接的名称获取 Links 集合中的链接元素。

常用方法

1. add(linkElement)：向 Links 集合中添加一个新的链接元素。
2. remove(index)：根据索引从 Links 集合中移除一个链接元素。
3. getElementsByClassName(className)：根据类名获取 Links 集合中的链接元素。

示例代码

下面是一个简单的示例代码，演示如何使用 Links 集合来获取页面中的链接元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Links 集合示例</title>
</head>
<body>
    <a href="https://www.example.com">Example Link 1</a>
    <a href="https://www.example.com">Example Link 2</a>
    <a href="https://www.example.com">Example Link 3</a>

    <script>
        // 获取 Links 集合
        var links = document.links;

        // 输出 Links 集合中链接元素的数量
        console.log(links.length);

        // 根据索引获取 Links 集合中的链接元素
        var link1 = links.item(0);
        console.log(link1.href);

        // 根据链接名称获取 Links 集合中的链接元素
        var link2 = links.namedItem('Example Link 2');
        console.log(link2.href);
    </script>
</body>
</html>

在上面的示例代码中，我们首先获取了页面中的 Links 集合，然后通过 item 方法和 namedItem 方法分别获取了第一个链接元素和名称为 "Example Link 2" 的链接元素，并输出了它们的 href 属性。

总结

通过本文的介绍，我们了解了 HTML DOM Links 集合的概念、常用属性和方法，并通过示例代码演示了如何使用 Links 集合来操作页面中的链接元素。希望本文对你有所帮助，欢迎继续学习和探索更多关于 Web 前端开发的知识。