JavaScript - 文档对象
你好，有抱负的程序员们！今天，我们将深入探索JavaScript文档对象的迷人世界。如果你是编程新手，不用担心——我会像多年来指导无数学生一样，一步步引导你。让我们一起开始这段冒险！
窗口文档对象
当你在网页浏览器中使用JavaScript时，你将与之交互的最重要的事物之一就是文档对象。但在我们深入了解它之前，让我们先了解它的父对象：窗口对象。
想象一下你的网络浏览器是一座房子。窗口对象代表了整个房子，而文档对象就像是最主要的活动场所——主客厅。你在浏览器窗口中看到的一切都是窗口对象的一部分，而网页内容特别是文档对象的一部分。
下面是一个简单的例子来说明这一点：
console.log(window.document === document); // 输出：true这表明document实际上是window对象的一个属性，但我们可以为了方便直接访问它作为document。
JavaScript 文档对象属性
既然我们了解了文档对象的位置，让我们探索一些它的属性。这些属性允许我们访问和操作网页的不同部分。
1. document.title
这个属性让你可以获取或设置你的网页标题——你知道，就是出现在浏览器标签页中的文本。
console.log(document.title); // 输出当前页面标题
document.title = "我的精彩页面"; // 改变页面标题2. document.body
这让你访问你的HTML文档的<body>元素。
document.body.style.backgroundColor = "浅蓝色";这行代码会将你的整个页面背景颜色改为浅蓝色。很酷吧？
3. document.URL
这个只读属性会给你当前页面的完整URL。
console.log(document.URL); // 输出类似于"https://www.example.com/page.html"的内容JavaScript 文档对象方法
方法就像是我们文档对象的超能力。它们允许我们对网页做各种有趣的事情。
1. document.getElementById()
这可能是你最常用的方法。它让你通过ID来抓取你的HTML中的一个元素。
let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "你好，我被JavaScript改变了！";在这个例子中，我们找到了ID为"mySpecialDiv"的元素并改变了它的内容。
2. document.createElement()
这个方法允许你从头开始创建新的HTML元素！
let newParagraph = document.createElement("p");
newParagraph.textContent = "我是一个新段落，很高兴见到你！";
document.body.appendChild(newParagraph);在这里，我们创建了一个新的段落元素，设置了它的文本，并将其添加到文档主体的末尾。
3. document.querySelector()
这个强大的方法让你可以使用CSS选择器来选择元素。
let firstButton = document.querySelector("button");
firstButton.style.color = "红色";这会找到你页面上的第一个按钮，并将它的文字颜色设置为红色。
文档对象属性列表
让我们总结一下文档对象的一些关键属性，以便于查阅：
| 属性 | 描述 |
|---|---|
| document.title | 当前文档的标题 |
| document.body |
<body>元素 |
| document.head |
<head>元素 |
| document.URL | 文档的完整URL |
| document.domain | 文档服务器的域名 |
| document.lastModified | 文档最后修改的日期 |
文档对象方法列表
下面是一些重要的文档对象方法的表格：
| 方法 | 描述 |
|---|---|
| document.getElementById() | 返回指定ID的元素 |
| document.getElementsByClassName() | 返回指定类名的元素集合 |
| document.getElementsByTagName() | 返回指定标签名的元素集合 |
| document.querySelector() | 返回匹配CSS选择器的第一个元素 |
| document.querySelectorAll() | 返回匹配CSS选择器的所有元素 |
| document.createElement() | 创建一个新的HTML元素 |
| document.write() | 将HTML表达式或JavaScript代码写入文档 |
记住，学习操作文档对象就像是在网页开发世界中成为一名巫师。有了这些工具，你可以让你的网页生动起来，并以惊人的方式响应用户操作。
在我们结束这堂课时，我想起了一个曾经害怕所有这些属性和方法的学生。但通过练习，她变得如此熟练，以至于她可以在睡梦中操作网页！（好吧，几乎。）关键是要实验并享受这个过程。
所以，我亲爱的学生们，不要害怕去玩转这些概念。尝试改变这个页面的标题，或者创建一个新元素并将其添加到主体中。你练习得越多，就会越自然。在你意识到之前，你将像专业人士一样构建交互式网页体验！
快乐编码，并记住——在编程的世界里，好奇心是你最大的资产。继续探索，继续提问，最重要的是，继续编码！
Credits: Image by storyset