有关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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue实现公共方法抽离
Jul 31 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 set_time_limit()函数的使用详解
2013/06/05 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
js 对象是否存在判断
2009/07/15 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python中字符串的操作方法大全
2018/06/03 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
浅谈django channels 路由误导
2020/05/28 Python
python -v 报错问题的解决方法
2020/09/15 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
小学生考试获奖感言
2014/01/30 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
婚宴父亲致辞
2015/07/27 职场文书
高一军训感想
2015/08/07 职场文书
旷工检讨书大全
2015/08/15 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技