10 BOM window对象

BOM的window对象

Window对象

window对象是浏览器环境中的全局对象，代表浏览器的窗口。在浏览器中，所有的JavaScript代码都是在window对象的作用域下运行的。以下是window对象的一些关键特性和常用属性与方法：

基本特性

• 全局作用域：在浏览器中，window是全局作用域的代表。所有全局变量和函数都是window的属性。

  var a = 1;
  console.log(window.a); // 输出 1

• 事件监听器：可以为window对象添加事件监听器，以响应各种事件，如窗口加载、窗口大小变化等。

  window.addEventListener('load', function() {
    console.log('页面加载完成');
  });

常用属性

• document：指向当前窗口的document对象，用于操作DOM。

  const title = window.document.title;
  console.log(title); // 输出当前页面的标题

• location：包含当前窗口的URL信息，并提供方法来加载新的文档。

  console.log(window.location.href); // 输出当前页面的完整URL
  window.location.href = 'https://www.example.com'; // 跳转到新的页面

• navigator：包含有关浏览器的信息，如浏览器名称、版本等。

  console.log(window.navigator.userAgent); // 输出用户代理字符串

• history：允许访问用户的历史记录，可以用于前进和后退操作。

  window.history.back(); // 后退到上一个页面
  window.history.go(-2); // 后退两个页面

• screen：包含有关用户屏幕的信息，如屏幕宽度和高度。

  console.log(window.screen.width); // 输出屏幕宽度
  console.log(window.screen.height); // 输出屏幕高度

常用方法

• setTimeout和clearTimeout：用于设置和清除定时器。

  const timer = window.setTimeout(() => {
    console.log('Hello after 2 seconds');
  }, 2000);
  
  window.clearTimeout(timer); // 清除定时器

• setInterval和clearInterval：用于设置和清除间隔定时器。

  const interval = window.setInterval(() => {
    console.log('Hello every 2 seconds');
  }, 2000);
  
  window.clearInterval(interval); // 清除间隔定时器

• alert、confirm和prompt：用于显示对话框。

  window.alert('Hello, World!'); // 显示警告框
  const isConfirmed = window.confirm('Are you sure?'); // 显示确认框
  const name = window.prompt('What is your name?'); // 显示输入框

其他特性

• localStorage和sessionStorage：用于在浏览器中存储数据。

  window.localStorage.setItem('key', 'value'); // 存储数据
  const value = window.localStorage.getItem('key'); // 获取数据

• console：用于调试输出信息。

  window.console.log('Hello, World!'); // 输出信息

window对象是浏览器JavaScript编程的基础，提供了丰富的API来操作浏览器窗口、文档、历史记录等。通过合理使用window对象的属性和方法，可以实现各种复杂的浏览器功能和交互.