這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對比總結(jié)，文中總結(jié)了很多的對比,，相信對大家的學(xué)習(xí)或者工作能帶來一定的幫助,，需要的朋友可以參考借鑒，下面來一起看看吧,。
一,、創(chuàng)建元素節(jié)點
1.1 原生JS創(chuàng)建元素節(jié)點
|
1 |
document.createElement("p");
|
1.2 jQuery創(chuàng)建元素節(jié)點
二、創(chuàng)建并添加文本節(jié)點
2.1 原生JS創(chuàng)建文本節(jié)點
|
1 |
`document.createTextNode("Text Content");
|
通常創(chuàng)建文本節(jié)點和創(chuàng)建元素節(jié)點配合使用,，比如：
|
1
2
3 |
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);
|
2.2 jQuery創(chuàng)建并添加文本節(jié)點：
|
1 |
var $p = $('<p>Hello World.</p>');
|
三,、復(fù)制節(jié)點
3.1 原生JS復(fù)制節(jié)點:
|
1 |
var newEl = pEl.cloneNode(true); `
|
true和false的區(qū)別：
- true ：克隆整個'<p>Hello World.</p>'節(jié)點
- false：只克隆'<p></p>' ，不克隆文本Hello World.'
3.2 jQuery復(fù)制節(jié)點
|
1 |
$newEl = $('#pEl').clone(true);
|
注意：克隆節(jié)點要避免`ID重復(fù)
四、 插入節(jié)點
4.1 原生JS向子節(jié)點列表的末尾添加新的子節(jié)點
原生JS在節(jié)點的已有子節(jié)點之前插入一個新的子節(jié)點：
|
1 |
El.insertBefore(newNode, targetNode);
|
4.2 在jQuery中,，插入節(jié)點的方法比原生JS多的多
在匹配元素子節(jié)點列表結(jié)尾添加內(nèi)容
|
1 |
$('#El').append('<p>Hello World.</p>');
|
把匹配元素添加到目標(biāo)元素子節(jié)點列表結(jié)尾
|
1 |
$('<p>Hello World.</p>').appendTo('#El');
|
在匹配元素子節(jié)點列表開頭添加內(nèi)容
|
1 |
$('#El').prepend('<p>Hello World.</p>');
|
把匹配元素添加到目標(biāo)元素子節(jié)點列表開頭
|
1 |
$('<p>Hello World.</p>').prependTo('#El');
|
在匹配元素之前添加目標(biāo)內(nèi)容
|
1 |
$('#El').before('<p>Hello World.</p>');
|
把匹配元素添加到目標(biāo)元素之前
|
1 |
$('<p>Hello World.</p>').insertBefore('#El');
|
在匹配元素之后添加目標(biāo)內(nèi)容
|
1 |
$('#El').after('<p>Hello World.</p>');
|
把匹配元素添加到目標(biāo)元素之后
|
1 |
$('<p>Hello World.</p>').insertAfter('#El');
|
五,、刪除節(jié)點
5.1 原生JS刪除節(jié)點
|
1 |
El.parentNode.removeChild(El);
|
5.2 jQuery刪除節(jié)點
六、替換節(jié)點
6.1 原生JS替換節(jié)點
|
1 |
El.repalceChild(newNode, oldNode);
|
注意：oldNode必須是parentEl真實存在的一個子節(jié)點
6.2 jQuery替換節(jié)點
|
1 |
$('p').replaceWith('<p>Hello World.</p>');
|
七,、設(shè)置屬性/獲取屬性
7.1 原生JS設(shè)置屬性/獲取屬性
|
1
2
3
4 |
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;
|
7.2 jQuery設(shè)置屬性/獲取屬性:
|
1
2
3
4 |
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");
|
總結(jié)
以上就是這篇文章的全部內(nèi)容了,，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流,。
|
