CSS对象模型(CSSOM)学习目录大纲
以下大纲基于 MDN 官方文档 CSS Object Model (CSSOM) 及 CSS Typed Object Model API 整理,适合具备 HTML、CSS 和 JavaScript 基础的初中级前端开发者。
聚焦 JavaScript 进阶之路,系统梳理基础语法、对象与原型、函数与闭包、数组与迭代及异步编程五大核心板块;独立剖析 TypeScript 类型系统、接口、泛型及高级类型演算,助你构建企业级类型思维。助你从 API 调用者蜕变为底层原理的掌控者。
选择你感兴趣的技术领域,开始深入学习
编辑精选的高质量技术文章
以下大纲基于 MDN 官方文档 CSS Object Model (CSSOM) 及 CSS Typed Object Model API 整理,适合具备 HTML、CSS 和 JavaScript 基础的初中级前端开发者。
系列导读:告别“写死”的矢量图,用 JavaScript 赋予 SVG 灵魂与交互。本文是《初中级前端进阶·SVG API 系列》的第 1 篇,为你梳理完整的知识体系与学习路径。
紧跟技术前沿,获取最新知识

对于初中级前端开发者来说,SVG 标签上的 xmlns="http://www.w3.org/2000/svg" 总显得有点“玄学”——删了好像也能显示,不删又怕出错。本文从 XML 命名空间的本质出发,结合 HTML5、独立 SVG 文件、动态创建、框架组件等真实场景,帮你彻底理清 xmlns 的“去留法则”。读完你会明白:什么时候可以潇洒删除,什么时候必须老老实实写上,以及为什么现代前端开发中你大概率不用再为它烦恼。

从零开始,带你理解 SVG 滤镜的工作方式,掌握最常用的几个滤镜基元,最后用一个综合案例把它们串起来。

本文带你系统性地了解让 SVG 动起来的三种核心方法:CSS 动画、SMIL 动画和 JavaScript 动画。我们会从最简单的例子开始,一步步拆解每种方法的特点、适用场景和常见陷阱,帮你建立一套属于自己的 SVG 动画“工具箱”。

这篇文章将带你从零开始,理解 <use> 的工作原理,掌握如何用 symbol 构建可维护的图标系统,并了解在现代前端工程化中如何高效管理 SVG 图标。
扫码关注「Sharing Pi」微信公众号,第一时间获取最新技术文章与独家作者经验分享。

微信扫码关注
Sharing Pi
每周推送精选技术文章,深度解析源码原理
汇集大厂面试真题,助你轻松应对技术面试
加入技术交流群,与 10,000+ 开发者共同成长