原生JS和jQuery操作DOM对比总结
更新时间：2017年01月19日 16:23:00 作者：Poetry
这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。
一、创建元素节点
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");
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要介绍了用原生js写一个弹窗消息提醒插件，下面小编来和大家一起学习一下2019-05-05
本文给大家介绍BootStrap Typeahead自动补全插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下2016-08-08
传统的javascript中只有对象,没有类的概念,下面这篇文章主要给大家介绍了关于ES6 class类实现继承的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了JS根据年月获得当月天数的实现代码,需要的朋友可以参考下2014-07-07
我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。2015-10-10
这篇文章主要给大家介绍了关于js重写alert事件的相关资料，这样可以避免alert弹框标题出现网址的情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
JavaScript是否可实现多线程 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感,2009-12-12
这篇文章主要介绍了从setTimeout看js函数执行过程,需要的朋友可以参考下2017-12-12
你是否在面试的过程中被考到过给你一个数组让你去掉重复项呢，下面小编就来总结一下对于数组去重这道简单的面试题时，我们可以回答的方法有什么吧2023-06-06
今天小编就为大家分享一篇关于js的各种数据类型判断的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最新评论