在 HTML 和 JavaScript 开发中，Window 和 Document 是两个非常重要的对象。它们提供了丰富的属性和方法，用于操作和访问浏览器窗口和文档内容。本文将详细介绍这两个对象的常用属性和方法，并通过示例帮助你更好地理解和使用它们。
Window 对象
Window 对象表示一个浏览器窗口或一个框架。它是浏览器的全局对象，提供了与浏览器窗口交互的方法和属性。以下是一些常用的属性和方法：
常用属性
-
window.innerWidth和window.innerHeight：分别表示浏览器视口（viewport）的宽度和高度。视口是用户实际看到的网页部分，不包括浏览器的工具栏、菜单栏等。<script>console.log("Viewport width: " + window.innerWidth);console.log("Viewport height: " + window.innerHeight); </script> -
window.outerWidth和window.outerHeight：分别表示浏览器窗口的整体宽度和高度，包括窗口的边框、工具栏等。<script>console.log("Window outer width: " + window.outerWidth);console.log("Window outer height: " + window.outerHeight); </script> -
window.closed：表示当前窗口是否关闭。<script>console.log("Window is closed: " + window.closed); </script> -
window.console：返回对console对象的引用，该对象提供对浏览器调试控制台的访问。<script>console.log("Console object: " + window.console); </script>
常用方法
-
window.addEventListener(type, listener)：在窗口上注册事件监听器。type是事件类型，listener是事件处理函数。<script>window.addEventListener('resize', () => {console.log('Window resized to: ' + window.innerWidth + 'x' + window.innerHeight);}); </script> -
window.removeEventListener(type, listener)：从窗口上移除事件监听器。type是事件类型，listener是之前注册的事件处理函数。<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只能绑定一个事件处理函数，如果多次绑定，只有最后一个会生效。<script>window.onload = () => {console.log('Window loaded');}; </script> -
window.open(url, target, features)：打开一个新窗口或一个新的浏览器标签页，并加载指定的 URL。<button onclick="openWindow()">打开新窗口</button> <script>function openWindow() {window.open('https://www.example.com', '_blank', 'width=600,height=400');} </script> -
window.alert(message)：显示一个带有指定消息和一个确定按钮的对话框。<button onclick="showAlert()">显示对话框</button> <script>function showAlert() {window.alert('欢迎访问我们的网站！');} </script> -
window.close()：关闭当前窗口。注意，此方法通常只能关闭由window.open()打开的窗口。<button onclick="closeWindow()">关闭窗口</button> <script>function closeWindow() {window.close();} </script> -
window.location：返回一个Location对象，该对象包含有关当前 URL 的信息，并提供方法来导航到新的 URL。<button onclick="goToGoogle()">跳转到 Google</button> <script>function goToGoogle() {window.location.href = 'https://www.google.com';} </script>
Document 对象
Document 对象表示一个 HTML 文档，提供了丰富的接口来操作和访问文档的内容。以下是一些常用的属性和方法：
常用属性
-
document.body：返回文档的<body>元素。<script>console.log(document.body); </script> -
document.head：返回文档的<head>元素。<script>console.log(document.head); </script> -
document.title：获取或设置文档的标题。标题通常是显示在浏览器标签页上的文本。<script>console.log(document.title); // 获取标题document.title = "新的标题"; // 设置标题 </script> -
document.URL：返回当前文档的 URL。<script>console.log(document.URL); </script>
常用方法
-
document.createElement(tagName)：创建一个新的 HTML 元素。<script>let newDiv = document.createElement('div');newDiv.textContent = '这是一个新创建的 div 元素';document.body.appendChild(newDiv); </script> -
document.getElementById(id)：通过元素的 ID 获取页面上的一个元素。<div id="myDiv">这是一个 div 元素</div> <script>let myDiv = document.getElementById('myDiv');console.log(myDiv); </script> -
document.querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素。<div class="myClass">第一个 div</div> <script>let firstDiv = document.querySelector('.myClass');console.log(firstDiv); </script> -
document.querySelectorAll(selector)：返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。<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是事件处理函数。<script>document.addEventListener('DOMContentLoaded', () => {console.log('DOM 完全加载和解析完毕');}); </script> -
document.removeEventListener(type, listener)：从文档上移除事件监听器。type是事件类型，listener是之前注册的事件处理函数。<script>function handleDOMContentLoaded() {console.log('DOM 完全加载和解析完毕');}document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);// 移除事件监听器document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded); </script>
总结
Window 和 Document 对象在 HTML 和 JavaScript 开发中非常重要。Window 对象提供了与浏览器窗口交互的方法和属性，而 Document 对象则提供了操作和访问文档内容的方法和属性。通过合理使用这些对象的属性和方法，可以实现丰富的前端功能，如动态内容生成、事件处理等。
希望本文对你有所帮助！如果有任何问题或建议，欢迎在评论区留言。
