原生JS和jQuery操作DOM对比总结
程序员文章站
2022-05-31 18:17:26
一、创建元素节点
1.1 原生js创建元素节点
document.createelement("p");
1.2 jquery创建元素节点
$(...
一、创建元素节点
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实现电商侧边导航效果
推荐阅读
-
DOM编程之原生JS与JQuery对比
-
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
-
从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系(代码教程)
-
DOM编程之原生JS与JQuery对比
-
原生JS和jQuery操作DOM对比总结
-
JQuery中的事件和DOM动画操作总结
-
JQuery中的事件和DOM动画操作总结
-
js和jquery对dom节点的操作(创建/追加)_javascript技巧
-
js和jquery对dom节点的操作(创建/追加)_javascript技巧
-
原生JS和jQuery操作DOM对比总结