如果你能解决这 10 个练习，你就是 HTML DOM Pro
如果你能解决这 10 个练习，你就是 HTML DOM Pro
从简单到艰苦的练习。
众所周知，JavaScript 是一种非常强大的语言，无论是在浏览器环境中还是在服务器环境中运行。在任何一种环境中，它都由强大而强大的 API 提供支持，以帮助轻松执行给定的任务。
谈到浏览器环境，一个特别有用的 API 也是最常用的 API 之一是 DOM API。 DOM 允许我们修改给定 HTML/XML 文档的结构和内容。
专注于纯 HTML 文档，我们有 HTML DOM API，它扩展了核心 DOM API 与 HTML 特定的功能。
总的来说，HTML DOM API 是如此庞大和复杂，以至于一个人可能需要一个多星期的时间才能完全熟悉一半的核心接口。
在这方面，我们收集了 10 个练习集，以测试您对 HTML DOM API 的各种接口的理解，来自我们自己的 JavaScript 课程 .
让我们看看他们……
1.文字内容
** 链接：** https://www.codeguage.com/courses/js/html-dom-text-content-exercise
难度级别： 平均
** 目标：** 手动定义 文本内容 财产在 节点 界面。
这 文本内容 当我们只想获取给定元素节点内的文本内容时，property 是一个非常方便的属性。但由于它是在 节点 接口，它不能只在元素节点上访问——我们也可以在文本和评论节点上访问它。在文本和评论节点上， 文本内容 返回他们的 节点值 .
通过重新定义 文本内容 财产在 节点 界面，您将了解如何从给定节点中删除元素节点，如何添加新节点，如何使用 节点值 ， 以及更多。
2.重新定义replaceChild()
** 链接：** https://www.codeguage.com/courses/js/html-dom-redefining-replacechild-exercise
难度级别： 简单的
** 目标：** 重新定义 替换子（） 使用其他方法的方法 节点 界面。
这 替换子（） 方法允许我们用另一个节点替换给定元素的特定子节点。从技术上讲， 替换子（） 可以完全使用其他两种方法来定义 节点 界面，这就是本练习的全部内容。
3. 节点数
** 链接：** https://www.codeguage.com/courses/js/html-dom-node-count-exercise
难度级别： 简单的
** 目标：** 创建一个 节点 实例方法来计算给定节点下的所有节点，包括它自己。
在像 DOM 这样的树结构中工作时，递归在许多情况下是我们的朋友。一个例子是当我们希望确切地知道从给定节点开始的子树中有多少节点，包括节点本身。
这就是这个练习的目的。你将学习递归，关于 子节点 属性，关于如何检查给定的节点类型等等。
4.重新定义insertAdjacentElement()
** 链接：** https://www.codeguage.com/courses/js/html-dom-redefining-insertadjacentelement-exercise
难度级别： 平均
** 目标：** 重新定义 插入相邻元素（） 的方法 元素 接口，在 JavaScript 中手动。
很多开发者都知道 附加孩子（） 和 插入前（） 的方法 节点 界面。但可能只有少数人知道 插入相邻元素（） 方法，这是一种将元素节点添加到另一个元素附近的非常方便的方法。
在本练习中，您将重新定义 插入相邻元素（） 仅使用现有的方法 节点 接口，并通过这种方式了解各种想法，例如如何使用元素的兄弟姐妹，使用 插入前（） 方法，如何在提供错误类型的参数时引发错误，等等。
5.重新定义firstElementChild
** 链接：** https://www.codeguage.com/courses/js/html-dom-redefining-firstelementchild-exercise
难度级别： 简单的
** 目标：** 重新定义 第一个元素子 的财产 元素 接口，在 JavaScript 中手动。
这 元素 接口定义了一个 第一个元素子 返回作为元素本身的调用元素节点的第一个子节点的属性。从技术上讲，它可以完全使用 节点 界面，这就是本练习的内容。
您将了解 第一个孩子 节点的属性，如何设置while循环，以及如何检查给定节点是否为元素。
6. 构建表
** 链接：** https://www.codeguage.com/courses/js/html-dom-building-tables-exercise
难度级别： 平均
** 目标：** 创建函数的两个变体，以基于给定的项目数组构建 HTML 表。
借助存储在 JavaScript 数组中的数据来构建 HTML 表并不是什么稀罕事。这个练习测试你这样做的技能。但不仅如此，它还通过以下方式测试你对 DOM 变异的理解 内部HTML 单独和通过突变方法，例如 附加孩子（） 和 插入前（） .
7.重新定义类名
** 链接：** https://www.codeguage.com/courses/js/html-dom-redefining-classname-exercise
难度级别： 简单的
** 目标：** 重新定义 班级名称 的财产 元素 接口，在 JavaScript 中手动。
8. HTML 序列化
** 链接：** https://www.codeguage.com/courses/js/html-dom-html-serialization-exercise
难度级别： 难的
** 目标：** 创建一个函数来复制 内部HTML 当它被检索到。
HTML 序列化是将元素节点转换为其相应的字符串表示的过程的名称。这似乎是一件容易的事，但它需要我们在设计算法时考虑几个想法。在本练习中，您将了解 属性 元素节点的属性，再次递归， 子节点 的财产 节点 界面等等。
9.动态列表
** 链接：** https://www.codeguage.com/courses/js/html-dom-dynamic-lists-exercise
难度级别： 简单的
** 目标：** 填满那些 <ol> 和 <ul> 元素与 <li> 具有 数据列表 他们的属性。
10. append() 填充
** 链接：** https://www.codeguage.com/courses/js/html-dom-append-polyfill-exercise
难度级别： 简单的
** 目标：** 为 附加（） 的方法 元素 界面。
这 附加（） 方法允许我们在给定元素的最后一个子元素之后批量插入节点。本练习测试您对文档片段的理解，以及如何使用它们对节点进行分组，然后将节点一次性插入到 DOM 中。
到底
至此，我们将完成 10 个练习的集合，以测试您对 HTML DOM API 的了解。
如果你觉得这些练习有帮助，别忘了为这篇文章鼓掌。另外，请在评论中告诉我们您认为其中哪一项最具挑战性。
要了解有关 JavaScript 的更多信息，您可以考虑我们完全免费的 JavaScript 课程，链接如下：
[
学习 JavaScript — 最全面的课程
www.codeguage.com
](https://www.codeguage.com/courses/js/)
最后，如果您通常喜欢在 Medium 上和 CodeGuage 上阅读我的内容，您可以随时通过以下方式支持我 给我买咖啡 ☕。
更多文章阅读
[
我的 CodeGuage 之旅的故事 - 第 2 部分
进入算法的世界
levelup.gitconnected.com
](/the-story-of-my-journey-to-codeguage-part-2-87fa914c3a4d)
[
我如何使用 CodeGuage 的故事 - 第 1 部分
通过 7 年级书中提到的链接开始编程。
levelup.gitconnected.com
](/my-story-on-how-i-got-to-codeguage-part-1-62313a880f10)
[
你知道 Visual Studio Code 中的标尺吗？
它们在编码时作为指南非常有用
levelup.gitconnected.com
](/do-you-know-about-rulers-in-visual-studio-code-f754b221a135)
[
您必须知道的计算机技术书籍的前 7 位出版商
以及如何从其中一个书开始。
levelup.gitconnected.com
](/top-7-publishers-of-books-on-computer-technologies-that-you-must-know-b36d51e29bc1)
升级编码
感谢您成为我们社区的一员！你走之前：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
