HTML | DOM 导航对象

在 HTML 和 JavaScript 中，导航对象（Navigation Object）允许开发者操作和控制浏览器窗口或框架间的导航行为。导航对象提供了一组方法和属性来获取当前页面 URL 信息，以及在浏览器窗口中导航到不同的页面。

Window 对象

Window 对象是浏览器的顶级对象，同时也是导航对象的入口点。通过全局的 window 对象，可以访问导航对象的各项功能。

Window 对象的属性

• window.location：提供了有关当前页面 URL 的信息，包括主机名、路径、查询参数等。
• window.history：提供了浏览器历史记录的访问和操作方法，允许在历史记录中前进或后退导航。
• window.frames：返回一个包含当前窗口所有子框架的数组。
• window.parent：引用当前窗口的父窗口。

Window 对象的方法

• window.open(url, target, options)：打开一个新的浏览器窗口或标签，并加载指定的 URL。
• window.close()：关闭当前窗口。
• window.alert(message)：显示一个带有指定消息的警告框。
• window.confirm(message)：显示一个带有指定消息和确认、取消按钮的对话框。
• window.prompt(message, defaultText)：显示一个带有指定消息和输入框的对话框，接受用户的输入。

Document 对象

Document 对象用于表示当前页面或内嵌框架中的文档，并提供了与导航相关的方法和属性。

Document 对象的属性

• document.URL：返回当前文档的完整 URL。
• document.domain：返回当前文档的域名部分。
• document.title：获取或设置当前文档的标题。

Document 对象的方法

• document.getElementById(id)：通过指定的元素 ID 获取对应的元素节点。
• document.getElementsByTagName(tagName)：通过指定的元素标签名获取对应的元素节点列表。
• document.createElement(tagName)：创建一个新的元素节点。
• document.write(text)：向文档写入指定的 HTML 或文本。

实例：使用导航对象控制页面跳转

// 跳转到新页面
function redirectTo(url) {
  window.location.href = url; // 在当前浏览器窗口中加载新页面
}

// 返回上一页
function goBack() {
  window.history.back(); // 后退一页
}

// 打开新窗口
function openWindow(url) {
  window.open(url, "_blank"); // 在新窗口中加载指定页面
}

// 获取当前页面的标题
function getPageTitle() {
  return document.title;
}

// 修改当前页面的标题
function setPageTitle(title) {
  document.title = title;
}

以上代码片段展示了如何使用导航对象的属性和方法来控制页面跳转、修改标题等操作。通过了解和熟练运用导航对象，程序员可以实现更复杂的页面导航和交互需求。

注意：导航对象的属性和方法可以根据应用场景和需求进行灵活运用，详情可参考相关文档和教程。

请注意，以上介绍只是导航对象的基本功能和用法，更多高级特性和更复杂的操作还需要进一步学习和实践。对于程序员而言，深入理解和掌握导航对象将有助于更好地开发和优化网页应用。