mass Framework DOM操作手册从选择器到节点增删改查的完整教程【免费下载链接】mass-Framework一个模块化面向大规模开发的javascript框架项目地址: https://gitcode.com/gh_mirrors/ma/mass-Frameworkmass Framework 是一个模块化、面向大规模开发的 JavaScript 框架采用 jQuery 式 API 设计学习成本极低。本手册是面向新手的mass Framework DOM 操作完整教程带你从最基础的选择器开始逐步掌握节点的查找、遍历、创建、插入、删除与替换最终熟练完成日常开发中最常见的 DOM 增删改查任务。一、mass Framework 的 DOM 能力从哪来mass Framework 采用高度模块化设计与 DOM 操作相关的核心模块都集中在根目录下。理解模块分工是掌握mass Framework DOM 操作的第一步模块文件职责种子模块mass.js最精简的内核内置模块加载系统与$入口选择器模块query.js代号 Icarus 的第五代选择器引擎负责按 CSS 表达式查找节点节点操作模块node.js最重要的模块提供节点的查找、创建、插入、删除、复制等全部基础操作其中 node.js 直接依赖 class扩展机制、support特性嗅探、query选择器和 data 四个模块是mass Framework DOM 操作的绝对核心 提示完整的节点操作 API 文档位于 doc/node/index.html每个方法都有独立示例页如 fn.append.html、fn.clone.html遇到疑惑随时查阅。二、快速上手加载 mass Framework 与 node 模块 mass Framework 自带 AMD 规范的模块加载系统支持并行加载与按需加载。最简单的 DOM 操作代码如下require(ready,node, function(){ $(body).append(pHello, mass Framework!/p); });ready负责等待 DOM 就绪node则加载节点操作模块。如果希望更省事也可以像 jQuery 一样直接写$(function(){ $(#list li).css(color, red); });当你请求node模块时框架会自动加载它的全部依赖lang、class、query、data 等旧版 IE 下还会自动加载补丁模块你完全无需关心内部细节只需专注于业务逻辑。三、选择器入门用一条 CSS 表达式精准定位节点 mass Framework 选择器是整个 DOM 操作的起点——通过选择器拿到节点集合再封装成 mass 实例类数组对象。$函数接受 CSS 表达式作为参数使用方式与 jQuery 几乎一致$(#logo) // id 选择器 $(.item) // 类选择器 $(div p) // 后代选择器 $(ul li:first) // 子元素 伪类 $(input:checked) // 表单状态伪类得益于第五代选择器引擎 Icarusquery.js 全面兼容 CSS3 高级伪类与 jQuery 自定义伪类如:contains、:has、:visible、:focus等都能直接使用。完整支持清单见 doc/query/index.html。拿到节点后你还可以在已有结果上继续筛选$(div).find(.hot); // 在结果内部继续查找 $(li).filter(.active); // 过滤出符合条件的 $(li).not(.disabled); // 排除不符合条件的 $(p).is(.intro); // 判断是否匹配四、节点遍历在 DOM 树中自由穿梭 节点遍历是mass Framework DOM 操作的高频场景。mass 提供了一套完整的遍历 API覆盖上下左右四个方向方向方法说明向上parent()/parents()/closest()获取父节点 / 所有祖先 / 最近的匹配祖先向下children()/contents()获取子元素 / 所有后代向前prev()/prevAll()/prevUntil()获取前一个 / 前面所有 / 直到某处的兄弟向后next()/nextAll()/nextUntil()获取后一个 / 后面所有 / 直到某处的兄弟平级siblings()/index()获取所有兄弟 / 当前节点在兄弟中的位置例如点击一个按钮时快速定位它所在的整个菜单分组$(button).on(click, function(){ $(this).closest(.menu-group).find(a).css(color, blue); });所有遍历方法都返回新的 mass 实例因此可以随意链式组合非常直观。五、动态创建节点从 HTML 字符串到真实 DOM ✨mass Framework 节点创建非常灵活直接向$传入 HTML 字符串即可var $box $(div classcardh3标题/h3p内容/p/div); $box.appendTo(body);内部会调用$.parseHTML将字符串解析为文档碎片再生成节点。除了div、p这类普通标签框架还专门处理了script、style、table、col等需要满足嵌套关系才能创建的标签避免在 IE 与 Safari 下报错。常用创建技巧$(li) // 单独的元素 $(li项目/li) // 带内容的元素 $(ulli1/li/ul) // 完整片段六、节点增删改查append 家族与 remove/empty ️这是mass Framework DOM 操作的重头戏。mass 提供了一整套插入、删除、清空方法与 jQuery 完全对齐方法作用反转方法append(content)内部末尾追加appendTo(target)prepend(content)内部开头插入prependTo(target)before(content)外部前面插入beforeTo(target)after(content)外部后面插入afterTo(target)replace(content)替换当前节点replaceTo(target)remove()移出 DOM 并清理数据—empty()清空所有子节点—反转方法appendTo等让把 A 插到 B 里的语义可以反着写逻辑更清晰// 两种写法等价第二种更贴近自然语言 $(#list).append($newItem); $newItem.appendTo(#list);插入方法支持元素节点、HTML 片段、CSS 选择器和 mass 对象四种参数并且remove在移除节点的同时会清理其关联数据避免内存泄漏。七、内容读写html() 与 text() 方法 读取和修改节点内容是 DOM 操作的日常需求mass 提供了一对多态的读写方法$(#box).html(b加粗内容/b); // 设置 innerHTML var html $(#box).html(); // 读取 innerHTML $(#box).text(纯文本内容); // 设置文本 var txt $(#box).text(); // 读取文本需要注意html()适合写入带标签的富内容text()会自动转义 HTML 特殊字符适合写入用户输入等不可信内容能有效防止 XSS 注入。另外还有outerHTML()可以读取或替换节点自身及其内容的完整 HTML。八、节点复制与位置clone 与几何信息 需要复制节点时使用clone()方法可传参数决定是否连同事件与数据一起复制var $copy $(#card).clone(true); // 深克隆同时复制事件与数据 $copy.appendTo(#list);在处理布局与交互时mass 还提供了一整套几何位置 API见 css 模块文档例如offset()获取元素相对文档的坐标。如下图为getBoundingClientRect的位置计算演示九、链式操作与数组式 API写出优雅的 DOM 代码 mass 实例本身是类数组对象因此既支持链式调用也内置了一批数组式方法$(li) .eq(2) // 取索引为 2 的元素 .addClass(hot) // 添加类名 .siblings() // 获取兄弟 .removeClass(hot) // 移除类名 .end(); // 回到上一个集合get()、eq()、first()、last()、slice()、gt()、lt()、even()、odd()让你像操作数组一样操作节点集合而push、pop、shift、sort等方法也按数组语义实现且自动按节点在 DOM 树中的位置排序。每个节点还能用each()遍历、用map()映射转换写起来非常顺手。十、学习建议与资源导航 想深入掌握mass Framework DOM 操作推荐以下学习路径读源码按 node.js → query.js → mass.js 的顺序阅读源码全中文注释本身就是绝佳的 JS 教程。查文档节点操作总览见 doc/node/index.html选择器支持见 doc/query/index.html每个 API 都有可运行示例。动手实践把本文的示例代码放到页面中跑一遍再试着封装自己的组件比如手风琴菜单动态表格等。mass Framework 的 API 与 jQuery 高度神似迁移成本极低而它的模块化设计又让你能按需加载、深度定制非常适合大型项目的架构选型。从今天的选择器到节点增删改查你已经迈出了 DOM 操作的第一步剩下的就是多写多练让这些 API 成为你的肌肉记忆。加油【免费下载链接】mass-Framework一个模块化面向大规模开发的javascript框架项目地址: https://gitcode.com/gh_mirrors/ma/mass-Framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 mass Framework DOM操作手册：从选择器到节点增删改查的完整教程
mass Framework DOM操作手册从选择器到节点增删改查的完整教程【免费下载链接】mass-Framework一个模块化面向大规模开发的javascript框架项目地址: https://gitcode.com/gh_mirrors/ma/mass-Frameworkmass Framework 是一个模块化、面向大规模开发的 JavaScript 框架采用 jQuery 式 API 设计学习成本极低。本手册是面向新手的mass Framework DOM 操作完整教程带你从最基础的选择器开始逐步掌握节点的查找、遍历、创建、插入、删除与替换最终熟练完成日常开发中最常见的 DOM 增删改查任务。一、mass Framework 的 DOM 能力从哪来mass Framework 采用高度模块化设计与 DOM 操作相关的核心模块都集中在根目录下。理解模块分工是掌握mass Framework DOM 操作的第一步模块文件职责种子模块mass.js最精简的内核内置模块加载系统与$入口选择器模块query.js代号 Icarus 的第五代选择器引擎负责按 CSS 表达式查找节点节点操作模块node.js最重要的模块提供节点的查找、创建、插入、删除、复制等全部基础操作其中 node.js 直接依赖 class扩展机制、support特性嗅探、query选择器和 data 四个模块是mass Framework DOM 操作的绝对核心 提示完整的节点操作 API 文档位于 doc/node/index.html每个方法都有独立示例页如 fn.append.html、fn.clone.html遇到疑惑随时查阅。二、快速上手加载 mass Framework 与 node 模块 mass Framework 自带 AMD 规范的模块加载系统支持并行加载与按需加载。最简单的 DOM 操作代码如下require(ready,node, function(){ $(body).append(pHello, mass Framework!/p); });ready负责等待 DOM 就绪node则加载节点操作模块。如果希望更省事也可以像 jQuery 一样直接写$(function(){ $(#list li).css(color, red); });当你请求node模块时框架会自动加载它的全部依赖lang、class、query、data 等旧版 IE 下还会自动加载补丁模块你完全无需关心内部细节只需专注于业务逻辑。三、选择器入门用一条 CSS 表达式精准定位节点 mass Framework 选择器是整个 DOM 操作的起点——通过选择器拿到节点集合再封装成 mass 实例类数组对象。$函数接受 CSS 表达式作为参数使用方式与 jQuery 几乎一致$(#logo) // id 选择器 $(.item) // 类选择器 $(div p) // 后代选择器 $(ul li:first) // 子元素 伪类 $(input:checked) // 表单状态伪类得益于第五代选择器引擎 Icarusquery.js 全面兼容 CSS3 高级伪类与 jQuery 自定义伪类如:contains、:has、:visible、:focus等都能直接使用。完整支持清单见 doc/query/index.html。拿到节点后你还可以在已有结果上继续筛选$(div).find(.hot); // 在结果内部继续查找 $(li).filter(.active); // 过滤出符合条件的 $(li).not(.disabled); // 排除不符合条件的 $(p).is(.intro); // 判断是否匹配四、节点遍历在 DOM 树中自由穿梭 节点遍历是mass Framework DOM 操作的高频场景。mass 提供了一套完整的遍历 API覆盖上下左右四个方向方向方法说明向上parent()/parents()/closest()获取父节点 / 所有祖先 / 最近的匹配祖先向下children()/contents()获取子元素 / 所有后代向前prev()/prevAll()/prevUntil()获取前一个 / 前面所有 / 直到某处的兄弟向后next()/nextAll()/nextUntil()获取后一个 / 后面所有 / 直到某处的兄弟平级siblings()/index()获取所有兄弟 / 当前节点在兄弟中的位置例如点击一个按钮时快速定位它所在的整个菜单分组$(button).on(click, function(){ $(this).closest(.menu-group).find(a).css(color, blue); });所有遍历方法都返回新的 mass 实例因此可以随意链式组合非常直观。五、动态创建节点从 HTML 字符串到真实 DOM ✨mass Framework 节点创建非常灵活直接向$传入 HTML 字符串即可var $box $(div classcardh3标题/h3p内容/p/div); $box.appendTo(body);内部会调用$.parseHTML将字符串解析为文档碎片再生成节点。除了div、p这类普通标签框架还专门处理了script、style、table、col等需要满足嵌套关系才能创建的标签避免在 IE 与 Safari 下报错。常用创建技巧$(li) // 单独的元素 $(li项目/li) // 带内容的元素 $(ulli1/li/ul) // 完整片段六、节点增删改查append 家族与 remove/empty ️这是mass Framework DOM 操作的重头戏。mass 提供了一整套插入、删除、清空方法与 jQuery 完全对齐方法作用反转方法append(content)内部末尾追加appendTo(target)prepend(content)内部开头插入prependTo(target)before(content)外部前面插入beforeTo(target)after(content)外部后面插入afterTo(target)replace(content)替换当前节点replaceTo(target)remove()移出 DOM 并清理数据—empty()清空所有子节点—反转方法appendTo等让把 A 插到 B 里的语义可以反着写逻辑更清晰// 两种写法等价第二种更贴近自然语言 $(#list).append($newItem); $newItem.appendTo(#list);插入方法支持元素节点、HTML 片段、CSS 选择器和 mass 对象四种参数并且remove在移除节点的同时会清理其关联数据避免内存泄漏。七、内容读写html() 与 text() 方法 读取和修改节点内容是 DOM 操作的日常需求mass 提供了一对多态的读写方法$(#box).html(b加粗内容/b); // 设置 innerHTML var html $(#box).html(); // 读取 innerHTML $(#box).text(纯文本内容); // 设置文本 var txt $(#box).text(); // 读取文本需要注意html()适合写入带标签的富内容text()会自动转义 HTML 特殊字符适合写入用户输入等不可信内容能有效防止 XSS 注入。另外还有outerHTML()可以读取或替换节点自身及其内容的完整 HTML。八、节点复制与位置clone 与几何信息 需要复制节点时使用clone()方法可传参数决定是否连同事件与数据一起复制var $copy $(#card).clone(true); // 深克隆同时复制事件与数据 $copy.appendTo(#list);在处理布局与交互时mass 还提供了一整套几何位置 API见 css 模块文档例如offset()获取元素相对文档的坐标。如下图为getBoundingClientRect的位置计算演示九、链式操作与数组式 API写出优雅的 DOM 代码 mass 实例本身是类数组对象因此既支持链式调用也内置了一批数组式方法$(li) .eq(2) // 取索引为 2 的元素 .addClass(hot) // 添加类名 .siblings() // 获取兄弟 .removeClass(hot) // 移除类名 .end(); // 回到上一个集合get()、eq()、first()、last()、slice()、gt()、lt()、even()、odd()让你像操作数组一样操作节点集合而push、pop、shift、sort等方法也按数组语义实现且自动按节点在 DOM 树中的位置排序。每个节点还能用each()遍历、用map()映射转换写起来非常顺手。十、学习建议与资源导航 想深入掌握mass Framework DOM 操作推荐以下学习路径读源码按 node.js → query.js → mass.js 的顺序阅读源码全中文注释本身就是绝佳的 JS 教程。查文档节点操作总览见 doc/node/index.html选择器支持见 doc/query/index.html每个 API 都有可运行示例。动手实践把本文的示例代码放到页面中跑一遍再试着封装自己的组件比如手风琴菜单动态表格等。mass Framework 的 API 与 jQuery 高度神似迁移成本极低而它的模块化设计又让你能按需加载、深度定制非常适合大型项目的架构选型。从今天的选择器到节点增删改查你已经迈出了 DOM 操作的第一步剩下的就是多写多练让这些 API 成为你的肌肉记忆。加油【免费下载链接】mass-Framework一个模块化面向大规模开发的javascript框架项目地址: https://gitcode.com/gh_mirrors/ma/mass-Framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考