原生js與jQuery操作DOM的區別

標籤：連結   dex   new   target   子節點   建立   文章   order   strong   

轉自網路

一、建立元素節點

1.1 原生JS建立元素節點

?

1	document.createElement("p");

1.2 jQuery建立元素節點

?

1	$(‘<p></p>‘);`

二、建立並添加文本節點

2.1 原生JS建立文本節點

?

1	`document.createTextNode("Text Content");

通常建立文本節點和建立元素節點配合使用，比如：

?

123	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設定屬性/擷取屬性

?

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

7.2 jQuery設定屬性/擷取屬性:

?

1234	$("#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的區別