当前位置：首页 > news >正文

Vue百日学习计划Day16-18天详细计划-Gemini版

news 2025/5/17 5:24:37

重要提示：

番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。
动手实践： DOM 操作和事件处理的理解高度依赖于实际编码。请务必在浏览器中创建 HTML 页面，并配合 JavaScript 代码进行实验。
开发者工具： 熟练使用浏览器的开发者工具 (特别是 Elements 和 Console 面板) 对学习 DOM 操作至关重要。
资源利用：
- MDN Web Docs (Web API - Document Object Model): https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
- MDN Web Docs (事件): https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
当前日期： 2025年5月16日 (用于知晓信息时效性，DOM 和事件核心概念相对稳定)

学习目标 Day 16-18：DOM 操作与事件

Day 16：DOM 基础与节点查找、属性操作
- 理解什么是 DOM (文档对象模型) 及其树形结构。
- 掌握常用的 DOM 节点查找方法。
- 学习如何读取和修改元素的属性和内容。
Day 17：DOM 节点操作与事件监听基础
- 掌握创建、添加、插入和删除 DOM 节点的方法。
- 理解事件和事件监听器的概念。
- 学习使用 addEventListener 来处理用户交互。
Day 18：事件流 (冒泡与捕获) 与事件委托
- 深入理解事件冒泡和事件捕获阶段。
- 掌握事件委托的概念、优势及其实现方式。
- 能够应用事件委托优化性能和简化代码。

每日学习计划 (3小时/天)

Day 16: DOM 基础与节点查找、属性操作

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： DOM 简介与树形结构。
- 内容： 阅读 MDN 关于 DOM 的介绍。理解 DOM 是 HTML/XML 文档的编程接口，它将文档解析为一个由节点和对象组成的结构 (通常称为 DOM 树)。认识常见的节点类型 (Document, Element, Text, Attribute)。
- 实践： 随便打开一个网页，使用浏览器开发者工具的 “Elements” 面板查看其 DOM 树结构，尝试对应 HTML 标签和 DOM 节点。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 查找 DOM 节点 (一): document.getElementById(), document.getElementsByTagName().
- 内容： 学习通过元素 ID 获取单个元素节点。学习通过标签名获取 HTMLCollection (动态集合)。
- 实践： 创建一个简单的 HTML 页面，包含不同 ID 和标签的元素。使用 JavaScript 获取这些元素并在控制台打印出来。观察 getElementsByTagName 返回的结果。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 查找 DOM 节点 (二): document.getElementsByClassName(), document.querySelector().
- 内容： 学习通过类名获取 HTMLCollection。学习 querySelector 使用 CSS 选择器语法获取匹配的第一个元素节点。
- 实践： 在 HTML 页面中添加带 class 的元素，练习使用 getElementsByClassName 和 querySelector (尝试不同的 CSS 选择器，如类选择器、后代选择器)。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 查找 DOM 节点 (三): document.querySelectorAll().
- 内容： 学习 querySelectorAll 使用 CSS 选择器语法获取所有匹配的元素节点，返回一个静态的 NodeList。
- 实践： 使用 querySelectorAll 获取多个元素，并尝试遍历 NodeList。对比其与 HTMLCollection 的区别 (例如，动态性)。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 读取和修改元素属性 (Attribute vs Property)。
- 内容： 学习使用 getAttribute(), setAttribute(), removeAttribute()。理解 HTML 属性 (attributes) 和 DOM 对象属性 (properties) 之间的区别与联系 (例如 id, class vs className, value)。
- 实践： 获取并修改 HTML 元素的标准属性 (如 id, class, src, href) 和自定义属性 (data-*)。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 读取和修改元素内容与样式。
- 内容： 学习 innerHTML, textContent, innerText 的区别和用法。学习通过 element.style 对象修改内联样式，以及通过 element.classList (add, remove, toggle, contains) 操作类名来改变样式。
- 实践： 获取一个元素的 HTML 内容和纯文本内容并进行修改。尝试动态改变一个元素的背景颜色、字体大小，以及通过添加/删除 CSS 类来改变其外观。

Day 17: DOM 节点操作与事件监听基础

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 创建 DOM 节点: document.createElement(), document.createTextNode().
- 内容： 学习如何使用 JavaScript 动态创建新的元素节点和文本节点。
- 实践： 创建一个新的 <p> 元素和一个文本节点，并尝试将文本节点的内容设置好。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 添加 DOM 节点: appendChild(), insertBefore().
- 内容： 学习如何将创建的节点添加到 DOM 树中。appendChild 将节点添加到指定父元素的子节点列表末尾。insertBefore 将节点插入到指定父元素的某个已有子节点之前。
- 实践： 将上一个番茄钟创建的 <p> 元素和文本节点组合并添加到 HTML 页面的某个现有元素 (如 <body> 或某个 <div>) 内部。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 删除和替换 DOM 节点: removeChild(), replaceChild().
- 内容： 学习如何从 DOM 中移除一个子节点。学习如何用一个新的节点替换一个已有的子节点。
- 实践： 选中页面上的某个元素，然后将其从 DOM 中删除。创建一个新元素，并用它替换页面上的另一个现有元素。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件简介与事件监听器。
- 内容： 理解什么是事件 (如点击、鼠标悬停、键盘按下等)。了解事件监听器 (event listener) 或事件处理器 (event handler) 的概念。
- 实践： 阅读 MDN 关于事件的介绍，思考网页中常见的用户交互行为。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 使用 addEventListener() 添加事件监听。
- 内容： 学习 element.addEventListener(type, listener, useCapture) 的语法。第一个参数是事件类型 (如 'click', 'mouseover')，第二个参数是事件触发时执行的回调函数，第三个参数通常默认为 false (事件冒泡阶段处理)。
- 实践： 为页面上的一个按钮添加一个点击事件监听器，当按钮被点击时，在控制台输出一条消息或改变页面上某个元素的文本。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件对象 (Event Object)。
- 内容： 理解当事件发生时，会创建一个事件对象并作为参数传递给事件处理函数。了解事件对象常用的属性 (如 event.target, event.currentTarget, event.type, event.preventDefault(), event.stopPropagation()).
- 实践： 在事件处理函数中打印事件对象，查看其包含的信息。尝试使用 event.target 来确定具体是哪个元素触发了事件。为一个链接添加点击事件，并使用 event.preventDefault() 来阻止其默认的跳转行为。

Day 18: 事件流 (冒泡与捕获) 与事件委托

第1个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件流 (Event Flow) - 事件冒泡 (Bubbling)。
- 内容： 理解事件冒泡的概念：当一个元素上的事件被触发时，同样的事件会依次在它的所有祖先元素上被触发，从内到外。
- 实践： 创建嵌套的 <div> 元素，为内部和外部的 <div> 都添加相同的点击事件监听器。点击内部 <div>，观察事件处理函数的执行顺序。
第2个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件流 (Event Flow) - 事件捕获 (Capturing)。
- 内容： 理解事件捕获的概念：与冒泡相反，事件从 window 开始，逐级向下传播到目标元素。可以通过将 addEventListener 的第三个参数设置为 true 来在捕获阶段处理事件。
- 实践： 修改上一个练习，将外部 <div> 的事件监听器设置为在捕获阶段触发，观察执行顺序的变化。
第3个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 停止事件传播: event.stopPropagation().
- 内容： 学习如何使用 event.stopPropagation() 来阻止事件继续在 DOM 树中冒泡或捕获。
- 实践： 在内部 <div> 的事件处理函数中调用 event.stopPropagation()，观察外部 <div> 的事件处理函数是否还会执行。
第4个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件委托 (Event Delegation) - 概念与优势。
- 内容： 理解事件委托是将事件监听器添加到父元素上，利用事件冒泡来管理子元素上的事件。了解其优势：减少内存消耗、简化动态添加元素的事件处理。
- 实践： 阅读相关资料，思考哪些场景适合使用事件委托 (例如：一个有很多列表项的 <ul>)。
- (长休息: 15-30分钟)
第5个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： 事件委托 (Event Delegation) - 实现。
- 内容： 学习如何在父元素的事件处理函数中，通过检查 event.target 来判断事件的实际来源，并执行相应的操作。
- 实践： 创建一个 <ul> 列表，只给 <ul> 元素添加一个点击事件监听器。当点击某个 <li> 时，在控制台输出该 <li> 的内容。尝试动态添加新的 <li> 到列表中，验证事件委托依然有效。
第6个番茄钟 (25分钟学习 + 5分钟休息):
- 主题： DOM 操作与事件综合练习。
- 内容： 结合 Day 16-18 所学，尝试完成一个小的交互功能。例如：
  - 一个简单的待办事项列表：可以输入内容，点击按钮添加事项到列表中，点击已添加的事项可以将其标记为完成或删除。
- 实践： 动手实现上述小功能，重点运用节点创建、添加、删除以及事件监听和事件委托。