浏览器window对象的常用属性和方法

1. window

• 简介: window 是浏览器的全局对象。通过 window，可以访问所有全局变量、全局函数、文档对象模型 (DOM) 等。

• 示例值:

  console.log(window === window.window); // true

2. 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); // 1920

  • screen.height: 屏幕的高度（以像素为单位）。

    console.log(screen.height); // 1080

  • screen.availWidth: 屏幕可用的宽度，排除系统任务栏等部分。

    console.log(screen.availWidth); // 1920

  • screen.availHeight: 屏幕可用的高度。

    console.log(screen.availHeight); // 1040

  • screen.colorDepth: 屏幕颜色深度（以位为单位）。

    console.log(screen.colorDepth); // 24

5. 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); // true

6. 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);