原生JS和jQuery操作DOM对比总结


Posted in Javascript onJanuary 19, 2017

一、创建元素节点

1.1 原生JS创建元素节点

document.createElement("p");

1.2 jQuery创建元素节点

$('<p></p>');`

二、创建并添加文本节点

2.1 原生JS创建文本节点

`document.createTextNode("Text Content");

通常创建文本节点和创建元素节点配合使用,比如:

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

2.2 jQuery创建并添加文本节点:

var $p = $('<p>Hello World.</p>');

三、复制节点

3.1 原生JS复制节点:

var newEl = pEl.cloneNode(true); `

true和false的区别:

  • true :克隆整个'<p>Hello World.</p>'节点
  • false:只克隆'<p></p>' ,不克隆文本Hello World.'

3.2 jQuery复制节点

$newEl = $('#pEl').clone(true);

注意:克隆节点要避免`ID重复

四、 插入节点

4.1 原生JS向子节点列表的末尾添加新的子节点

El.appendChild(newNode);

原生JS在节点的已有子节点之前插入一个新的子节点:

El.insertBefore(newNode, targetNode);

4.2 在jQuery中,插入节点的方法比原生JS多的多

在匹配元素子节点列表结尾添加内容

$('#El').append('<p>Hello World.</p>');

把匹配元素添加到目标元素子节点列表结尾

$('<p>Hello World.</p>').appendTo('#El');

在匹配元素子节点列表开头添加内容

$('#El').prepend('<p>Hello World.</p>');

把匹配元素添加到目标元素子节点列表开头

$('<p>Hello World.</p>').prependTo('#El');

在匹配元素之前添加目标内容

$('#El').before('<p>Hello World.</p>');

把匹配元素添加到目标元素之前

$('<p>Hello World.</p>').insertBefore('#El');

在匹配元素之后添加目标内容

$('#El').after('<p>Hello World.</p>');

把匹配元素添加到目标元素之后

$('<p>Hello World.</p>').insertAfter('#El');

五、删除节点

5.1 原生JS删除节点

El.parentNode.removeChild(El);

5.2 jQuery删除节点

$('#El').remove();

六、替换节点

6.1 原生JS替换节点

El.repalceChild(newNode, oldNode);

注意:oldNode必须是parentEl真实存在的一个子节点

6.2 jQuery替换节点

$('p').replaceWith('<p>Hello World.</p>');

七、设置属性/获取属性

7.1 原生JS设置属性/获取属性

imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;

7.2 jQuery设置属性/获取属性:

$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
php表单处理操作
2017/11/16 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python入门教程之识别验证码
2017/03/04 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python中的decorator的作用详解
2018/07/26 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
体育课课后反思
2014/04/24 职场文书
七一党日活动总结
2014/07/08 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
战马观后感
2015/06/08 职场文书
感谢师恩主题班会
2015/08/17 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL