js global全局对象|极客笔记

js global全局对象

JavaScript是一门广泛应用于Web开发的编程语言，它具有许多内置的方法和对象，可以在全局范围内访问和使用。这些对象称为JavaScript的全局对象。在本文中，我们将详细介绍JavaScript的全局对象，并给出一些示例代码来说明它们的用法和功能。

1. window对象

window对象是JavaScript的全局对象之一，它表示浏览器窗口或框架的一个实例。通过window对象，我们可以访问和操作浏览器窗口的各种属性和方法。

1.1. 属性

window对象具有许多属性，下面是一些常用的属性：

window.innerWidth：窗口的内部宽度，不包括滚动条和边框。
window.innerHeight：窗口的内部高度，不包括滚动条和边框。
window.outerWidth：窗口的外部宽度，包括滚动条和边框。
window.outerHeight：窗口的外部高度，包括滚动条和边框。
window.location：表示当前窗口的URL信息。
window.document：表示当前窗口中加载的文档对象。

1.2. 方法

window对象还具有一些方法，用于执行特定的操作，下面是一些常用的方法：

window.alert(message)：在窗口中弹出一个警告框，显示指定的消息。
window.confirm(message)：显示一个带有OK和取消按钮的确认框，用于确认或取消特定操作。
window.prompt(message, defaultText)：显示一个带有输入框的提示框，用户可以输入文本并返回给调用者。
window.open(url, windowName, features)：打开一个新窗口或标签页，并加载指定的URL。
window.close()：关闭当前窗口。

下面是一个示例代码，演示如何使用window对象的属性和方法：

console.log(window.innerWidth); // 输出窗口的内部宽度
console.log(window.innerHeight); // 输出窗口的内部高度

window.alert("这是一个警告框"); // 弹出一个警告框
var result = window.confirm("确定要执行该操作吗？"); // 弹出一个确认框，并将结果保存到变量中
console.log(result); // 输出用户的确认结果

var name = window.prompt("请输入你的名字："); // 弹出一个提示框，用户输入的文本保存到变量中
console.log("你的名字是：" + name);

window.open("https://www.example.com"); // 打开一个新窗口并加载指定的URL

window.close(); // 关闭当前窗口

2. document对象

document对象是JavaScript的另一个全局对象，它表示当前窗口中加载的文档（网页）。通过document对象，我们可以访问和操作文档的各种属性和方法。

2.1. 属性

document对象具有许多属性，下面是一些常用的属性：

document.title：表示文档的标题。
document.URL：表示文档的URL地址。
document.domain：表示文档的域名。
document.body：表示文档的<body>元素。
document.head：表示文档的<head>元素。

2.2. 方法

document对象还具有一些方法，用于执行特定的操作，下面是一些常用的方法：

document.getElementById(id)：根据指定的ID值获取文档中的元素。
document.getElementsByClassName(className)：根据指定的类名获取文档中的元素。
document.getElementsByTagName(tagName)：根据指定的标签名获取文档中的元素。
document.createElement(tagName)：创建一个指定标签名的新元素。
document.createTextNode(text)：创建一个包含指定文本内容的新文本节点。
document.write(content)：向文档中写入指定的内容。

下面是一个示例代码，演示如何使用document对象的属性和方法：

console.log(document.title); // 输出文档的标题
console.log(document.URL); // 输出文档的URL地址

var body = document.body; // 获取文档的<body>元素
console.log(body.innerHTML); // 输出<body>元素的HTML内容

var element = document.getElementById("myElement"); // 根据ID获取文档中的元素
console.log(element.textContent); // 输出元素的文本内容

var elements = document.getElementsByClassName("myClass"); // 根据类名获取文档中的元素
console.log(elements.length); // 输出元素的数量

var newElement = document.createElement("div"); // 创建一个新的<div>元素
newElement.textContent = "这是新创建的元素"; // 设置元素的文本内容
body.appendChild(newElement); // 将元素添加到文档中的<body>元素中

document.write("Hello, World!"); // 向文档中写入内容