HTML | DOM 链接集合

DOM 链接集合用于返回 HTML 文档中具有“href”属性的所有 和 元素的集合。集合中的元素按照它们在源代码中的显示进行排序。
句法：

document.links

属性：它包含单个属性长度，用于返回集合中 和 元素的数量。
方法： DOM 链接集合包含下面列出的三个方法：

• [index]：用于返回指定索引的和元素。索引值从 0 开始。如果索引值超出范围，则返回 NULL 值。
• item(index)：用于返回所选索引的和元素。索引值从 0 开始。如果索引值超出范围，则返回 NULL 值。该方法的执行与上述方法类似。
• namedItem(id)：用于返回集合中与指定 id 匹配的 和 元素。如果 id 不存在，则返回 NULL。

返回值：一个 HTMLCollection 对象，表示文档中的所有 元素和/或 元素。集合中的元素按照它们在源代码中的出现进行排序

下面的程序说明了文档.links 属性在 HTML 中的使用：
示例 1：使用 length 属性计算集合中的链接元素数。

html

 

    
        DOM document.links() Property
    
 
    
    
        function countLinks() {
 
            let collection = document.links.length;
 
            document.querySelector(".count").innerHTML =
                collection;
        }
    

 

    GeeksforGeeks
 
    Articles:
 
    
 
        
        
                Javascript-Tutorial
            
 
        
                Python Programming Language
            
 
        
                C++ Programming Language
            
 
        
                HTML Tutorials
            
    
 
    
    
      Count links
    
    
    
 
    Total links: 
    

 

---

输出：

示例 2：用于查找文档中所有链接并返回其 ID 的 HTML 代码。

html

 

    
        DOM document.links() Property
    
 
    
        /* function to find IDs */
        function findLinkIDs() {
            let final = '';
            let collection = document.links;
 
            // Run a for loop upto the number of
            // links in the collection
            for (let i = 0; i < collection.length; i++) {
 
                // Add each link id to a list
                final += `<li> ${collection[i].id} </li>`;
            }
 
            // Replace the HTML of the ID div
            document.querySelector(".ids").innerHTML =
                  final;
        }
    

 

    GeeksforGeeks
 
    Articles:
 
    
 
        
        
                Javascript-Tutorial
            
 
        
                Python Programming Language
            
 
        
                C++ Programming Language
            
 
        
                HTML Tutorials
            
    
 
    
    
      Find link IDs
    
 
     
The IDs of all the links are: 
 
    

 

输出：
点击按钮前：

点击按钮后：

示例 3：使用 id 属性通过链接 ID 查找并显示其 href 属性

html

 

    
        DOM document.links() Property
    
 
    
        function returnLinkByID() {
            let collection =
                document.links.namedItem("js");
 
            // Get the href attribute
            let link = collection.href;
 
            document.querySelector(".name").innerHTML =
                link;
 
        }
    

 

    GeeksforGeeks
 
    Articles:
 
    
 
        
        
                Javascript-Tutorial
            
 
        
                Python Programming Language
            
 
        
                C++ Programming Language
            
 
        
                HTML Tutorials
            
    
 
    
        Find by link ID
    
 
     

      The href attribute in the link
      with id of 'js' is:
    
 
 
    

 

输出：
点击按钮前：

点击按钮后：

支持的浏览器： DOM链接收集方式支持的浏览器如下：

• 铬合金
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器