正文

掌握JS获取网址链接的5种简单方法

/0 浏览量
0716

在网页开发中，获取网址链接是一个基础且常用的操作。JavaScript（JS）提供了多种方法来实现这一功能。以下将详细介绍五种简单且实用的方法来获取网址链接。

方法一：使用 window.location.href

window.location.href 是获取当前页面完整URL的最直接方法。它返回的是一个字符串，包含了协议、域名、路径、查询参数等。

// 获取当前页面的完整URL
var currentUrl = window.location.href;
console.log(currentUrl);

方法二：使用 document.URL

document.URL 与 window.location.href 类似，但它只返回当前页面的URL，不包括协议部分。

// 获取当前页面的URL（不包含协议）
var currentUrl = document.URL;
console.log(currentUrl);

方法三：使用 document.location

document.location 与 window.location 类似，但它是一个对象，而不是一个字符串。你可以使用它来获取或设置URL。

// 获取当前页面的URL
var currentUrl = document.location.href;
console.log(currentUrl);

// 设置新的URL
document.location.href = 'https://www.example.com';

方法四：使用 document.getElementsByTagName 和 href 属性

如果你需要获取页面中某个元素的链接，可以使用 getElementsByTagName 方法结合 href 属性。

// 获取页面中所有<a>标签的href属性
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    console.log(links[i].href);
}

方法五：使用 document.querySelector 或 document.querySelectorAll

如果你需要获取页面中特定元素的链接，可以使用 querySelector 或 querySelectorAll 方法。

// 获取id为'myLink'的元素的href属性
var link = document.querySelector('#myLink');
console.log(link.href);

// 获取所有class为'myClass'的元素的href属性
var links = document.querySelectorAll('.myClass');
for (var i = 0; i < links.length; i++) {
    console.log(links[i].href);
}

总结

以上五种方法都是获取网址链接的有效途径。根据你的具体需求，你可以选择最合适的方法。记住，JavaScript提供了丰富的API来处理DOM和页面元素，熟练掌握这些方法将有助于你更高效地开发网页应用。

-- 展开阅读全文 --