有关jquery与DOM节点操作方法和属性记录


Posted in Javascript onApril 15, 2016

网上找了份jquery的操作节点方法清单。如下:

方法 源包装集/字串 目标包装集体 特性描述
A.append(B)       B       A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置。 由此,若目标只匹配一个元素时,使用前述方法后源将被删除。
B.appendTo(A)
A.prepend(B)
B.prependTo(A)
A.before(B)
B.insertBefore(A)
A.after(B)
B.insertAfter(A)

举例说明:在以上表格中,A.append(B)表示把B添加到与A匹配的所有元素的现有内容后面,因此B是源,A是目标包装集。

总结一句话就是:使用以上方法后,两个节点变为同级兄弟节点

以下是DOM操作节点的方法汇总:

(1)appendChild方法,用于向childNodes列表的末尾添加一个节点

//将newNode添加到someNode的childNodes列表的末尾

var returnedNode = someNode.appendChild(newNode);

//将someNode的第一个子节点变为最后一个子节点

var returnedNode = someNode.appendChild(someNode.firstChild);

(2)insertBefore方法,可以把节点放在childNodes列表中某个特定的位置上

//插入后成为最后一个子节点

returnedNode = someNode.insertBefore(newNode, null);//和appendChild效果相同

//插入后成为第一个子节点

returnedNode = someNode.insertBefor(newNode, someNode.firstChild);

(3)replaceChild方法用于替换子节点,接受两个参数:要插入的子节点和要替换的子节点。要替换的子节点将从文档树中被移除,同时由要插入的子节点占据其位置

//替换第一个子节点

returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

(4)removeChild方法用于移除子节点

//移除第一个子节点

var formerFirstChild = someNode.removeChild(someNode.firstChild);

总结一句话就是:以上方法都是父节点操作子节点的

下图给出了父子、兄弟节点的查找关系

 有关jquery与DOM节点操作方法和属性记录

以上这篇有关jquery与DOM节点操作方法和属性记录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 #Javascript
You might like
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
实例讲解React 组件
2020/07/07 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python requests库用法实例详解
2018/08/14 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Django框架封装外部函数示例
2019/05/28 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
英文简历自荐信范文
2013/12/11 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
小学生植树节活动总结
2014/07/04 职场文书
廉政承诺书范文
2015/04/28 职场文书
检讨书怎么写
2015/05/07 职场文书
女性健康讲座主持词
2015/07/04 职场文书
教师教育教学随笔
2015/08/15 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技