JavaScript - DOM 文档：初学者指南

你好，有抱负的程序开发者们！今天，我们将踏上一段激动人心的旅程，探索 JavaScript 和文档对象模型（DOM）的世界。不要担心这些术语听起来有点吓人——在本教程结束时，你将能够像专业人士一样操作网页！

JavaScript - DOM Document

HTML DOM 文档是什么？

想象你正在建造一栋房子。房子的蓝图就像你的 HTML 文档，而你在浏览器中看到的就是实际的房子。现在，如果你在房子建好后想改变墙壁的颜色或者增加一扇新窗户，DOM 就派上用场了！

HTML DOM（文档对象模型）是一个用于 HTML 文档的编程接口。它将文档的结构表示为树状层次结构，其中每个节点都是一个代表文档一部分的对象。

这棵树的根是 document 对象。它就像我们房子的地基——其他所有东西都是建立在它之上的。

让我们从一个简单的例子开始：

<!DOCTYPE html>
<html>
<head>
<title>我的第一个 DOM 页面</title>
</head>
<body>
<h1>欢迎来到 DOM！</h1>
<p>这是一个段落。</p>
</body>
</html>

在这个 HTML 结构中，document 位于顶部，接着是 html，然后是 head 和 body，依此类推。

既然我们了解了 DOM 是什么，让我们学习如何访问它。在 JavaScript 中，我们可以使用 document 关键字轻松访问文档对象。

这里有一个简单的例子：

console.log(document);

如果你在浏览器的控制台中运行这个代码，你将看到整个文档对象。这就好像是从空中俯瞰我们的房子！

文档对象有许多属性，允许我们访问 HTML 文档的不同部分。让我们探索其中的一些属性：

childElementCount 属性返回一个元素拥有的子元素数量。对于文档对象，它返回 <html> 元素的直接子元素数量。

console.log(document.childElementCount);

这通常会返回 1，因为 <html> 元素通常只有一个直接子元素：<body> 元素。

links 属性返回文档中所有带有 href 属性的 <a> 和 <area> 元素的集合。

console.log(document.links);

这就好比是在问：“我们的房子有多少扇门（链接）？”

title 属性用于获取或设置当前文档的标题。

console.log(document.title);
document.title = "我的新标题";

这就好比是在更改你房子的门牌名称！

让我们通过一些实际世界的示例来应用我们的知识：

document.title = "欢迎来到 " + document.title;
console.log("新标题是：" + document.title);

这个脚本会在当前页面标题的开头加上 "欢迎来到 "。这就好比是在你房子的门牌上加上一个友好的问候！

let linkCount = document.links.length;
console.log("这个页面有 " + linkCount + " 个链接。");

这个脚本会计算你页面上有多少个链接。这就好比是在计算有多少种离开你房子的方式！

let newHeading = document.createElement("h2");
newHeading.textContent = "这个标题是由 JavaScript 添加的！";
document.body.appendChild(newHeading);

这个脚本会创建一个新的 <h2> 元素，设置它的文本内容，并将其添加到 <body> 的末尾。这就好比是用 JavaScript 给你的房子增加了一个新房间！

以下是一些常见的 DOM 文档方法：

方法	描述
`document.getElementById(id)`	返回具有指定 ID 的元素
`document.getElementsByClassName(name)`	返回具有指定类名的元素集合
`document.getElementsByTagName(name)`	返回具有指定标签名的元素集合
`document.createElement(name)`	创建一个元素节点
`document.createTextNode(text)`	创建一个文本节点
`document.querySelector(selector)`	返回匹配 CSS 选择器的第一个元素
`document.querySelectorAll(selector)`	返回匹配 CSS 选择器的所有元素

恭喜你！你已经迈出了使用 JavaScript 操作 DOM 的第一步。记住，DOM 是你构建动态、交互式网页的工具箱。它就像一根魔杖，可以随意改变网页的任何部分！

在你继续你的旅程时，你将发现使用 DOM 的更多激动人心的方法。保持练习，保持好奇心，不要害怕尝试。在你意识到之前，你将能够让你构建的网页随着你的 JavaScript 节奏起舞！

祝编码愉快，未来的网页巫师们！

Credits: Image by storyset