原生JS和jQuery操作DOM對(duì)比總結(jié)
一、創(chuàng)建元素節(jié)點(diǎn)
1.1 原生JS創(chuàng)建元素節(jié)點(diǎn)
document.createElement("p");
1.2 jQuery創(chuàng)建元素節(jié)點(diǎn)
$('<p></p>');`
二、創(chuàng)建并添加文本節(jié)點(diǎn)
2.1 原生JS創(chuàng)建文本節(jié)點(diǎn)
`document.createTextNode("Text Content");
通常創(chuàng)建文本節(jié)點(diǎn)和創(chuàng)建元素節(jié)點(diǎn)配合使用，比如：
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);
2.2 jQuery創(chuàng)建并添加文本節(jié)點(diǎn)：
var $p = $('<p>Hello World.</p>');
三、復(fù)制節(jié)點(diǎn)
3.1 原生JS復(fù)制節(jié)點(diǎn):
var newEl = pEl.cloneNode(true); `
true和false的區(qū)別：
- true ：克隆整個(gè)'<p>Hello World.</p>'節(jié)點(diǎn)
- false：只克隆'<p></p>' ，不克隆文本Hello World.'
3.2 jQuery復(fù)制節(jié)點(diǎn)
$newEl = $('#pEl').clone(true);
注意：克隆節(jié)點(diǎn)要避免`ID重復(fù)
四、 插入節(jié)點(diǎn)
4.1 原生JS向子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)
El.appendChild(newNode);
原生JS在節(jié)點(diǎn)的已有子節(jié)點(diǎn)之前插入一個(gè)新的子節(jié)點(diǎn)：
El.insertBefore(newNode, targetNode);
4.2 在jQuery中，插入節(jié)點(diǎn)的方法比原生JS多的多
在匹配元素子節(jié)點(diǎn)列表結(jié)尾添加內(nèi)容
$('#El').append('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素子節(jié)點(diǎn)列表結(jié)尾
$('<p>Hello World.</p>').appendTo('#El');
在匹配元素子節(jié)點(diǎn)列表開頭添加內(nèi)容
$('#El').prepend('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素子節(jié)點(diǎn)列表開頭
$('<p>Hello World.</p>').prependTo('#El');
在匹配元素之前添加目標(biāo)內(nèi)容
$('#El').before('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素之前
$('<p>Hello World.</p>').insertBefore('#El');
在匹配元素之后添加目標(biāo)內(nèi)容
$('#El').after('<p>Hello World.</p>');
把匹配元素添加到目標(biāo)元素之后
$('<p>Hello World.</p>').insertAfter('#El');
五、刪除節(jié)點(diǎn)
5.1 原生JS刪除節(jié)點(diǎn)
El.parentNode.removeChild(El);
5.2 jQuery刪除節(jié)點(diǎn)
$('#El').remove();
六、替換節(jié)點(diǎn)
6.1 原生JS替換節(jié)點(diǎn)
El.repalceChild(newNode, oldNode);
注意：oldNode必須是parentEl真實(shí)存在的一個(gè)子節(jié)點(diǎn)
6.2 jQuery替換節(jié)點(diǎn)
$('p').replaceWith('<p>Hello World.</p>');
七、設(shè)置屬性/獲取屬性
7.1 原生JS設(shè)置屬性/獲取屬性
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;
7.2 jQuery設(shè)置屬性/獲取屬性:
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了用原生js寫一個(gè)彈窗消息提醒插件，下面小編來和大家一起學(xué)習(xí)一下2019-05-05
BootStrap Typeahead自動(dòng)補(bǔ)全插件實(shí)例代碼
本文給大家介紹BootStrap Typeahead自動(dòng)補(bǔ)全插件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-08-08
ES6?class類實(shí)現(xiàn)繼承實(shí)例詳解
傳統(tǒng)的javascript中只有對(duì)象,沒有類的概念,下面這篇文章主要給大家介紹了關(guān)于ES6?class類實(shí)現(xiàn)繼承的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-07-07
基于JavaScript實(shí)現(xiàn)移動(dòng)端TAB觸屏切換效果
我們使用移動(dòng)端時(shí)可以通過觸屏手勢(shì)左右滑動(dòng)來切換TAB欄目，如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導(dǎo)航條和TAB對(duì)應(yīng)的內(nèi)容組成，切換導(dǎo)航條上的標(biāo)簽同時(shí)標(biāo)簽對(duì)應(yīng)的內(nèi)容也會(huì)跟著切換。本文將結(jié)合實(shí)例給大家介紹一個(gè)移動(dòng)端TAB觸屏切換效果。2015-10-10
js重寫alert事件（避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址）
這篇文章主要給大家介紹了關(guān)于js重寫alert事件的相關(guān)資料，這樣可以避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址的情況，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript是否可實(shí)現(xiàn)多線程 深入理解JavaScript定時(shí)機(jī)制
JavaScript的setTimeout與setInterval是兩個(gè)很容易欺騙別人感情的方法,因?yàn)槲覀冮_始常常以為調(diào)用了就會(huì)按既定的方式執(zhí)行, 我想不少人都深有同感,2009-12-12
從setTimeout看js函數(shù)執(zhí)行過程
這篇文章主要介紹了從setTimeout看js函數(shù)執(zhí)行過程,需要的朋友可以參考下2017-12-12
JavaScript中數(shù)組去重的辦法總結(jié)
你是否在面試的過程中被考到過給你一個(gè)數(shù)組讓你去掉重復(fù)項(xiàng)呢，下面小編就來總結(jié)一下對(duì)于數(shù)組去重這道簡(jiǎn)單的面試題時(shí)，我們可以回答的方法有什么吧2023-06-06
今天小編就為大家分享一篇關(guān)于js的各種數(shù)據(jù)類型判斷的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01