JavaScript DOM 初学者练习

本周，我在自己运营的 YouTube 频道上发布了一些关于完成实用 JavaScript 练习的视频，这些练习均侧重于操作 DOM。

我认为这是一种将您的 JavaScript 技能应用到更多“现实生活”情况的好方法。

以下是一些练习的示例...

您可以在各自的 Codepen 页面上查看练习的设置，并且我在教程视频中为每个练习提供了一个示例解决方案（并不是说这是最好的方法！）。

突出显示段落文本中所有超过 8 个字符的单词（例如使用黄色背景）

在这个练习中，我要求用户提取段落标签的内容，然后在长度超过 8 个字符的单词后添加高亮背景。确定单词在字符串中的起始和结束位置（例如多个空格、符号等）总是比较棘手，但因为我们只需要将规则应用于长度超过 8 个字符的单词，所以我们可以采用一种较为轻松的方法。

您将如何解决这个问题？

将所有问号（？）替换为思考的表情（🤔），将所有感叹号（！）替换为惊讶的表情（😲）

希望这个练习足够简单，虽然由于之前的练习在页面上创建了多个段落标签，所以稍微复杂了一些。这也是一次很好的字符串操作练习。

对此您有自己的解决方案吗？

为每个输入添加必需的验证，如果没有输入任何文本，则在条目旁边显示一条错误消息。

在视频 2 中，我们使用了一个基于 Bootstrap 的简单注册表单，而本次练习则围绕设置表单验证展开。我原本想找一个简单的解决方案，但管理多个错误实例（例如，当验证不通过时，错误会相互叠加）却很复杂。所以我提供的解决方案虽然有点混乱，但确实有效。

您能用更简单的方法解决这个问题吗？

为了使计划的排序更加合理，使用 JavaScript，将基本计划移动到专业计划之前（左侧）。

在视频 3 中，我们制作了一个简单的价格表，其中包含两种产品：基础版和专业版，这是一个在 DOM 中移动元素的练习。使用 CSS 可以解决这个问题，但您能用 JavaScript 实现吗？

为了让专业计划具有更强的号召性用语，请将当前的“开始”按钮更新为蓝色（#007bff）和白色文字，并将文字改为“立即购买”

通常情况下，您会直接在 CSS（或其预处理器）中更新样式，但本练习要求您使用 JavaScript 执行此操作，如果您了解 Bootstrap 类，则可以采取一种快捷方式。

如果你看过这些练习，我希望它们对练习你的 JavaScript 技能有所帮助。如果你感兴趣的话，可以考虑订阅“初级开发者中心”频道，别忘了在评论区留言，分享你自己的练习答案。