原生js與jQuery操作DOM的區別
阿新 • • 發佈：2017-07-10
too 文章 .get dom rep tro 復制 原生js pla
轉自網絡
一、創建元素節點
1.1 原生JS創建元素節點
?| 1 |
document.createElement("p");
|
1.2 jQuery創建元素節點
?| 1 |
$(‘<p></p>‘);`
|
二、創建並添加文本節點
2.1 原生JS創建文本節點
?| 1 |
`document.createTextNode("Text Content");
|
通常創建文本節點和創建元素節點配合使用，比如：
?| 1 2 3 |
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);
|
2.2 jQuery創建並添加文本節點：
?| 1 |
var $p = $(‘<p>Hello World.</p>‘);
|
三、復制節點
3.1 原生JS復制節點:
?| 1 |
var newEl = pEl.cloneNode(true); `
|
true和false的區別：
- true ：克隆整個‘<p>Hello World.</p>‘節點
- false：只克隆‘<p></p>‘ ，不克隆文本Hello World.‘
3.2 jQuery復制節點
?| 1 |
$newEl = $(‘#pEl‘).clone(true);
|
註意：克隆節點要避免`ID重復
四、 插入節點
4.1 原生JS向子節點列表的末尾添加新的子節點
?| 1 |
El.appendChild(newNode);
|
原生JS在節點的已有子節點之前插入一個新的子節點：
?| 1 |
El.insertBefore(newNode, targetNode);
|
4.2 在jQuery中，插入節點的方法比原生JS多的多
在匹配元素子節點列表結尾添加內容
?| 1 |
$(‘#El‘).append(‘<p>Hello World.</p>‘);
|
把匹配元素添加到目標元素子節點列表結尾
?| 1 |
$(‘<p>Hello World.</p>‘).appendTo(‘#El‘);
|
在匹配元素子節點列表開頭添加內容
?| 1 |
$(‘#El‘).prepend(‘<p>Hello World.</p>‘);
|
把匹配元素添加到目標元素子節點列表開頭
?| 1 |
$(‘<p>Hello World.</p>‘).prependTo(‘#El‘);
|
在匹配元素之前添加目標內容
?| 1 |
$(‘#El‘).before(‘<p>Hello World.</p>‘);
|
把匹配元素添加到目標元素之前
?| 1 |
$(‘<p>Hello World.</p>‘).insertBefore(‘#El‘);
|
在匹配元素之後添加目標內容
?| 1 |
$(‘#El‘).after(‘<p>Hello World.</p>‘);
|
把匹配元素添加到目標元素之後
?| 1 |
$(‘<p>Hello World.</p>‘).insertAfter(‘#El‘);
|
五、刪除節點
5.1 原生JS刪除節點
?| 1 |
El.parentNode.removeChild(El);
|
5.2 jQuery刪除節點
?| 1 |
$(‘#El‘).remove();
|
六、替換節點
6.1 原生JS替換節點
?| 1 |
El.repalceChild(newNode, oldNode);
|
註意：oldNode必須是parentEl真實存在的一個子節點
6.2 jQuery替換節點
?| 1 |
$(‘p‘).replaceWith(‘<p>Hello World.</p>‘);
|
七、設置屬性/獲取屬性
7.1 原生JS設置屬性/獲取屬性
?| 1 2 3 4 |
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;
|
7.2 jQuery設置屬性/獲取屬性:
?| 1 2 3 4 |
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");
|
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
原文鏈接：http://blog.poetries.top/2017/01/14/js-and-jquery-dom-compare/
原生js與jQuery操作DOM的區別