HTML 中的 Window 和 Document 介绍

在 HTML 和 JavaScript 开发中，Window 和 Document 是两个非常重要的对象。它们提供了丰富的属性和方法，用于操作和访问浏览器窗口和文档内容。本文将详细介绍这两个对象的常用属性和方法，并通过示例帮助你更好地理解和使用它们。

Window 对象

Window 对象表示一个浏览器窗口或一个框架。它是浏览器的全局对象，提供了与浏览器窗口交互的方法和属性。以下是一些常用的属性和方法：

常用属性

window.innerWidth 和 window.innerHeight：分别表示浏览器视口（viewport）的宽度和高度。视口是用户实际看到的网页部分，不包括浏览器的工具栏、菜单栏等。
html 复制代码
```
<script>
    console.log("Viewport width: " + window.innerWidth);
    console.log("Viewport height: " + window.innerHeight);
</script>
```
window.outerWidth 和 window.outerHeight：分别表示浏览器窗口的整体宽度和高度，包括窗口的边框、工具栏等。
html 复制代码
```
<script>
    console.log("Window outer width: " + window.outerWidth);
    console.log("Window outer height: " + window.outerHeight);
</script>
```

window.closed：表示当前窗口是否关闭。

html 复制代码

<script>
    console.log("Window is closed: " + window.closed);
</script>

window.console ：返回对 console 对象的引用，该对象提供对浏览器调试控制台的访问。
html 复制代码
```
<script>
    console.log("Console object: " + window.console);
</script>
```

常用方法

window.addEventListener(type, listener) ：在窗口上注册事件监听器。type 是事件类型，listener 是事件处理函数。

html 复制代码

<script>
    window.addEventListener('resize', () => {
        console.log('Window resized to: ' + window.innerWidth + 'x' + window.innerHeight);
    });
</script>

window.removeEventListener(type, listener) ：从窗口上移除事件监听器。type 是事件类型，listener 是之前注册的事件处理函数。

html 复制代码

<script>
    function handleResize() {
        console.log('Window resized to: ' + window.innerWidth + 'x' + window.innerHeight);
    }
    window.addEventListener('resize', handleResize);
    // 移除事件监听器
    window.removeEventListener('resize', handleResize);
</script>

window.onload ：在窗口加载完成后执行指定的函数。window.onload 只能绑定一个事件处理函数，如果多次绑定，只有最后一个会生效。
html 复制代码
```
<script>
    window.onload = () => {
        console.log('Window loaded');
    };
</script>
```

window.open(url, target, features)：打开一个新窗口或一个新的浏览器标签页，并加载指定的 URL。

html 复制代码

<button onclick="openWindow()">打开新窗口</button>
<script>
    function openWindow() {
        window.open('https://www.example.com', '_blank', 'width=600,height=400');
    }
</script>

window.alert(message)：显示一个带有指定消息和一个确定按钮的对话框。

html 复制代码

<button onclick="showAlert()">显示对话框</button>
<script>
    function showAlert() {
        window.alert('欢迎访问我们的网站！');
    }
</script>

window.close() ：关闭当前窗口。注意，此方法通常只能关闭由 window.open() 打开的窗口。

html 复制代码

<button onclick="closeWindow()">关闭窗口</button>
<script>
    function closeWindow() {
        window.close();
    }
</script>

window.location ：返回一个 Location 对象，该对象包含有关当前 URL 的信息，并提供方法来导航到新的 URL。

html 复制代码

<button onclick="goToGoogle()">跳转到 Google</button>
<script>
    function goToGoogle() {
        window.location.href = 'https://www.google.com';
    }
</script>

Document 对象

Document 对象表示一个 HTML 文档，提供了丰富的接口来操作和访问文档的内容。以下是一些常用的属性和方法：

常用属性

document.body ：返回文档的 <body> 元素。
html 复制代码
```
<script>
    console.log(document.body);
</script>
```
document.head ：返回文档的 <head> 元素。
html 复制代码
```
<script>
    console.log(document.head);
</script>
```
document.title：获取或设置文档的标题。标题通常是显示在浏览器标签页上的文本。
html 复制代码
```
<script>
    console.log(document.title); // 获取标题
    document.title = "新的标题"; // 设置标题
</script>
```
document.URL：返回当前文档的 URL。
html 复制代码
```
<script>
    console.log(document.URL);
</script>
```

常用方法

document.createElement(tagName)：创建一个新的 HTML 元素。

html 复制代码

<script>
    let newDiv = document.createElement('div');
    newDiv.textContent = '这是一个新创建的 div 元素';
    document.body.appendChild(newDiv);
</script>

document.getElementById(id)：通过元素的 ID 获取页面上的一个元素。

html 复制代码

<div id="myDiv">这是一个 div 元素</div>
<script>
    let myDiv = document.getElementById('myDiv');
    console.log(myDiv);
</script>

document.querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素。

html 复制代码

<div class="myClass">第一个 div</div>
<script>
    let firstDiv = document.querySelector('.myClass');
    console.log(firstDiv);
</script>

document.querySelectorAll(selector)：返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。

html 复制代码

<div class="myClass">第一个 div</div>
<div class="myClass">第二个 div</div>
<script>
    let allDivs = document.querySelectorAll('.myClass');
    console.log(allDivs);
</script>

document.addEventListener(type, listener) ：在文档上注册事件监听器。type 是事件类型，listener 是事件处理函数。
html 复制代码
```
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DOM 完全加载和解析完毕');
    });
</script>
```

document.removeEventListener(type, listener) ：从文档上移除事件监听器。type 是事件类型，listener 是之前注册的事件处理函数。

html 复制代码

<script>
    function handleDOMContentLoaded() {
        console.log('DOM 完全加载和解析完毕');
    }
    document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
    // 移除事件监听器
    document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
</script>

总结

Window 和 Document 对象在 HTML 和 JavaScript 开发中非常重要。Window 对象提供了与浏览器窗口交互的方法和属性，而 Document 对象则提供了操作和访问文档内容的方法和属性。通过合理使用这些对象的属性和方法，可以实现丰富的前端功能，如动态内容生成、事件处理等。

希望本文对你有所帮助！如果有任何问题或建议，欢迎在评论区留言。