前端自学第27天：DOM操作、Flexbox布局与LeetCode实战

1. 自学IT的第27天我的真实学习路径与心得作为一名从零开始自学IT的转行者第27天往往是个关键节点。这时候你已经熬过了最初的新鲜期开始感受到编程的难度但还没形成系统的知识框架。今天我想完整记录下这个阶段的学习内容、工具使用和心态变化给同样在自学的朋友一些参考。我选择的是前端开发路线因为它的学习曲线相对平缓能快速看到成果反馈。前26天已经完成了HTML/CSS基础、JavaScript语法入门和Git版本控制的基本操作。第27天的学习计划是这样的上午JavaScript DOM操作实战3小时下午Flexbox布局深度练习2小时晚上LeetCode算法题每日一练1小时2. JavaScript DOM操作实战详解2.1 为什么DOM操作如此重要DOMDocument Object Model是前端开发的核心技能之一。它就像连接HTML文档和JavaScript的桥梁没有DOM操作网页就是静态的标本。我通过一个简单的待办事项列表项目来练习// 获取DOM元素 const taskInput document.getElementById(task-input); const addButton document.getElementById(add-button); const taskList document.getElementById(task-list); // 事件监听 addButton.addEventListener(click, () { if (taskInput.value.trim() ! ) { const newTask document.createElement(li); newTask.textContent taskInput.value; taskList.appendChild(newTask); taskInput.value ; } });这个练习中我踩过的坑忘记trim()处理输入导致空字符串也能添加没有及时清空输入框造成重复添加事件监听函数内this指向问题2.2 更高效的DOM操作技巧通过MDN文档学习到批量操作DOM时应该使用DocumentFragmentconst fragment document.createDocumentFragment(); for(let i0; i100; i){ const item document.createElement(div); item.textContent Item ${i}; fragment.appendChild(item); } document.body.appendChild(fragment);这比直接操作DOM 100次性能要好得多。3. Flexbox布局深度练习3.1 Flexbox的核心概念Flexbox是我见过最强大的CSS布局工具之一。第27天我专门练习了以下属性组合flex-direction justify-contentalign-items align-selfflex-grow flex-shrinkorder属性的妙用通过这个青蛙游戏flexboxfroggy.com来练习特别有效。比如这个典型问题.container { display: flex; justify-content: space-between; align-items: flex-end; } .item3 { align-self: flex-start; }3.2 实际项目中的应用我模仿Apple官网做了一个产品展示区.product-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .product-card { flex: 1 1 300px; max-width: 350px; }关键收获flex-basis和max-width的配合使用gap属性替代margin的便利性媒体查询中flex-direction的调整4. LeetCode算法每日一练4.1 两数之和的多种解法今天选择的是经典的两数之和问题LeetCode #1。先写暴力解法function twoSum(nums, target) { for(let i0; inums.length; i){ for(let ji1; jnums.length; j){ if(nums[i] nums[j] target){ return [i, j]; } } } }然后用哈希表优化function twoSum(nums, target) { const map new Map(); for(let i0; inums.length; i){ const complement target - nums[i]; if(map.has(complement)){ return [map.get(complement), i]; } map.set(nums[i], i); } }4.2 算法练习的正确姿势我总结的算法练习方法先自己思考10分钟尝试暴力解法查看题解理解最优思路自己实现并测试边界条件第二天重新写一遍5. 自学过程中的工具链搭建5.1 我的开发环境配置VS Code及必备插件Prettier代码格式化ESLint代码质量检查Live Server实时预览Chrome开发者工具技巧元素审查时直接修改样式Console调试时使用console.table()Network面板分析请求5.2 知识管理方案我用Notion搭建了学习知识库每日学习日志模板错题本记录coding问题知识卡片系统核心概念速查项目进度看板6. 自学第27天的关键心得项目驱动学习比单纯看教程有效10倍遇到问题先自己尝试解决1小时再查资料每天记录学习日志能明显提升效率适当加入算法练习对思维训练很有帮助最难的不是技术本身而是保持持续学习的动力。我的方法是每周做一个小项目看到自己做出的东西特别有成就感。比如这周我用DOM操作做了个简易的画板应用虽然简单但让我对事件监听有了更深理解。