标签：node 封装 parent dom DOM 获取 用于 fn

封装术语

库

• 我们把提供给其他人用的工具代码叫做库
• 比如jQuery、Underscore

API

• 库暴露出来的函数或属性叫做API(应用编程接口)

框架

• 当你的库变得很大,并且需要学习才能看懂，那么这个库就叫框架，比如Vue / React

对象风格（命名空间风格）

window.dom 是我们提供的全局对象

增

• dom.create(`<div>hi</div>`) 用于创建节点
• dom.after(node,node2) 用于新增弟弟
• dom.before(node,node2) 用于新增哥哥
• dom.append(parent,child) 用于新增儿子
• dom.wrap(<div></div>) 用于新增爸爸

删

• dom.remove(node) 用于删除节点
• dom.empty(parent) 用于删除后代

改

• dom.attr(node,'title',?) 用于读写属性
• dom.text(node,?) 用于读写文本内容
• dom.html(node,?) 用于读写 html 内容
• dom.style(node,{color:'red'}) 用于修改 style
• dom.class.add(node,'blue') 用于添加 class
• dom.class.remove(node,'blue') 用于删除 class
• dom.on(node,'click',fn) 用于添加事件监听
• dom.off(node,'click',fn) 用于删除事件监听

查

• dom.find('选择器') 用于获取标签或标签们
• dom.parent(node) 用于获取父元素
• dom.children(node) 用于获取子元素
• dom.siblings(node) 用于获取兄弟姐妹元素
• dom.next(node) 用于获取弟弟
• dom.previous(node) 用于获取哥哥
• dom.each(nodes,fn) 用于遍历所有节点
• dom.index(node) 用于获取排行老几​​​​​​

​​​​​​​

 *本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

标签：node,封装,parent,dom,DOM,获取,用于,fn
来源： https://blog.csdn.net/sinat_38021004/article/details/119000027

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。