数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学JavaScript 的 window 对象和 document 对象有何区别？
在JavaScript中，window对象代表当前的网页浏览器窗口，而document对象代表当前在窗口中加载的网页。
JavaScript 中的window 对象提供了访问浏览器历史记录、位置和其他属性和方法的途径，这些属性和方法允许我们与浏览器窗口本身进行交互。它包含关于浏览器窗口的信息，例如大小、窗口包含的文档以及窗口的历史记录。
document 对象表示网页的整体结构，并提供访问页面内容以及操作该内容的方法。它包含关于页面内容的信息，例如 URL、标题、内容和链接。
例如，我们可以使用 `document.getElementById()` 方法通过其 ID 获取页面上元素的引用，或者使用 `document.createElement()` 方法创建新元素。我们还可以使用 window 对象来操作浏览器窗口，例如使用 `window.open()` 方法打开新窗口，或者使用 `window.scrollTo()` 方法滚动到页面上的特定位置。
JavaScript 窗口
在 JavaScript 中，window 对象代表当前的网页浏览器窗口。它提供了访问浏览器历史记录、位置和其他属性和方法的途径，这些属性和方法允许你与浏览器窗口进行交互。
window 对象是 JavaScript 中的全局对象，在整个代码中的所有上下文中都可用。你可以使用 `window` 关键字直接访问它。
以下是一些涉及 window 对象的常见任务示例：
获取页面的当前 URL：`var currentUrl = window.location.href;`
获取浏览器窗口的宽度：`var windowWidth = window.innerWidth;`
获取浏览器窗口的高度：`var windowHeight = window.innerHeight;`
打开一个新窗口：`window.open('http://www.example.com', '_blank');`
关闭当前窗口：`window.close();`
语法
javascript window 的语法如下：
window.propertyName
示例
在这个例子中，我们获取了三样东西：窗口的 `innerHeight`、`innerWidth` 和当前 `URL`。
</head>
<body>
<h2>JavaScript Window</h2>
<p id="innerHeight"></p>
<p id="innerWidth"></p>
<p id="currentUrl"></p>
<script>
const height = document.getElementById('innerHeight');
const width = document.getElementById('innerWidth');
const url = document.getElementById('currentUrl');
height.textContent = "innerHeight - " +
window.innerHeight;
width.textContent = "innerWidth - " +
window.innerWidth;
url.textContent = "currentUrl - " + window.location.href;
</script>
</body>
</html>
JavaScript 文档
在 JavaScript 中，document 对象代表当前在网页浏览器中加载的网页。它提供了访问页面内容以及操作该内容的方法。
document 对象是 window 对象的一个属性，也是 JavaScript 中的全局对象，这意味着它在整个代码中的所有上下文中都可用。你可以使用 `document` 关键字直接访问它。
以下是涉及 document 对象的一些常见任务示例：
获取文档的标题：`var docTitle = document.title;`
获取文档的最后修改日期：`var modified = document.lastModified;`
获取文档的 body 元素：`var bodyEl = document.body;`
通过其 ID 获取元素：`var el = document.getElementById('my-element');`
创建一个新元素：`var newEl = document.createElement('div');`
语法
javascript document 的语法如下：
document.propertyName
示例
在这个例子中，我们获取了三样东西：
<html>
<head>
<title>Example- JavaScript Document</title>
</head>
<body>
<h2> JavaScript Document </h2>
<p id="title"></p>
<p id="currentUrl"></p>
<script>
const p = document.getElementById('title');
const url = document.getElementById('currentUrl');
p.textContent = "Doc Title - " + document.title;
url.textContent = "Doc CurrentUrl - " + document.location.href;
</script>
</body>
</html>
JavaScript 窗口和文档的区别
下表重点介绍了 javascript window 与 javascript document 的区别：
| JavaScript 的 window | JavaScript 的 document |
|---|---|
| 它代表当前的网页浏览器窗口。 | 它代表当前在窗口中加载的网页。 |
| 其属性包括 location、history、innerWidth、innerHeight 等。 | 其属性包括 title、lastModified、body、head 等。 |
| JavaScript window 方法有：open()、close()、scrollTo()、alert() 等。 | JavaScript document 方法有：getElementById()、createElement()、querySelector()、querySelectorAll() 等。 |
| 它是全局可用的。 | 它是全局可用的。 |
| 它是 window 的一个对象。 | 它是浏览器的对象。 |
结论
总而言之，JavaScript window 和 document 是 JavaScript 中两个最重要的对象，两者都有不同的用途。window 代表当前的网页浏览器窗口，而 document 对象代表当前在窗口中加载的网页。
虽然这两个对象都是全局的，可以从代码的任何地方访问，但在开发 web 项目时，理解它们之间的区别对于有效使用它们至关重要。
268 次浏览
