浏览器window对象的常用属性和方法 1. window简介: window 是浏览器的全局对象。通过 window，可以访问所有全局变量、全局函数、文档对象模型 (DOM) 等。示例值:console.log(window === window.window); // true2. document简介: document 对象表示 HTML 或 XML 文档的根节点。它提供了对文档内容的访问和操作方法。常用属性和方法:document.title: 获取或设置文档的标题。console.log(document.title); // "Example Page" document.title = "New Title";document.getElementById(id): 根据 ID 获取元素。var element = document.getElementById("header"); console.log(element.innerHTML); // 输出该元素的 HTML 内容document.querySelector(selector): 返回匹配指定 CSS 选择器的第一个元素。var element = document.querySelector(".my-class"); console.log(element.innerHTML); // 输出该元素的 HTML 内容document.createElement(tagName): 创建一个指定标签类型的新元素。var newDiv = document.createElement("div"); newDiv.innerHTML = "Hello, World!"; document.body.appendChild(newDiv);document.addEventListener(event, function): 为文档添加事件监听器。document.addEventListener("DOMContentLoaded", function() { console.log("Document is fully loaded"); });3. location简介: location 对象包含当前页面的 URL 信息，并提供了操作 URL 的方法。常用属性和方法:location.href: 获取或设置当前页面的 URL。console.log(location.href); // "https://www.example.com/page.html" location.href = "https://www.example.com/newpage.html";location.protocol: 获取或设置当前 URL 的协议。console.log(location.protocol); // "https:" location.protocol = "http:";location.host: 获取或设置当前 URL 的主机名和端口号。console.log(location.host); // "www.example.com:8080" location.host = "www.newdomain.com";location.pathname: 获取或设置 URL 的路径部分。console.log(location.pathname); // "/page.html" location.pathname = "/newpage.html";location.search: 获取或设置 URL 中的查询字符串。console.log(location.search); // "?id=123&name=abc" location.search = "?id=456";location.hash: 获取或设置 URL 中的片段标识符（锚点）。console.log(location.hash); // "#section2" location.hash = "#section1";location.reload(): 重新加载当前页面。location.reload();location.assign(url): 加载新的页面。location.assign("https://www.example.com/newpage.html");4. screen简介: screen 对象提供了用户屏幕的属性信息，比如分辨率和可用尺寸。常用属性:screen.width: 屏幕的宽度（以像素为单位）。console.log(screen.width); // 1920screen.height: 屏幕的高度（以像素为单位）。console.log(screen.height); // 1080screen.availWidth: 屏幕可用的宽度，排除系统任务栏等部分。console.log(screen.availWidth); // 1920screen.availHeight: 屏幕可用的高度。console.log(screen.availHeight); // 1040screen.colorDepth: 屏幕颜色深度（以位为单位）。console.log(screen.colorDepth); // 245. navigator简介: navigator 对象包含浏览器的信息，如名称、版本、语言和在线状态。常用属性:navigator.userAgent: 返回浏览器的用户代理字符串，包含有关浏览器版本、操作系统等的信息。console.log(navigator.userAgent); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ..."navigator.platform: 返回浏览器运行的操作系统平台。console.log(navigator.platform); // "Win32"navigator.language: 返回当前浏览器的语言。console.log(navigator.language); // "en-US"navigator.onLine: 返回一个布尔值，表示浏览器是否处于联网状态。console.log(navigator.onLine); // true6. history简介: history 对象包含用户的会话历史记录，可以在用户浏览的页面之间进行前进或后退操作。常用方法:history.back(): 导航到历史记录中的前一个页面。history.back();history.forward(): 导航到历史记录中的下一个页面。history.forward();history.go(n): 根据相对位置加载页面。例如 n=1 前进一个页面，n=-1 后退一个页面。history.go(-1); // 后退到上一个页面history.pushState(state, title, url): 添加新的历史记录条目，而不重新加载页面。state 是与历史记录关联的状态对象，title 是页面标题，url 是新的 URL（相对路径）。history.pushState({page: 1}, "New Page", "/newpage.html");7. element简介: element 是 DOM 树中的元素节点，表示文档中的一个 HTML 元素。可以通过 document 对象来访问和操作这些元素。常用属性和方法:element.innerHTML: 获取或设置元素的 HTML 内容。var element = document.getElementById("content"); console.log(element.innerHTML); // 输出元素内部的 HTML element.innerHTML = "<p>New content</p>"; // 设置新的 HTML 内容element.style: 获取或设置元素的内联样式。element.style.backgroundColor = "blue";element.setAttribute(name, value): 设置元素的属性值。element.setAttribute("class", "new-class");element.getAttribute(name): 获取元素的属性值。var className = element.getAttribute("class"); console.log(className); // 输出元素的 class 属性值element.addEventListener(event, function): 为元素添加事件监听器。element.addEventListener("click", function() { alert("Element clicked!"); });element.appendChild(child): 将一个节点添加为元素的最后一个子节点。var newElement = document.createElement("div"); element.appendChild(newElement);