您好,登錄后才能下訂單哦!
本文實(shí)例講述了原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作。分享給大家供大家參考,具體如下:
知識(shí)點(diǎn),依然會(huì)遺忘。我在思考到底是什么原因。想到研究生考試準(zhǔn)備的那段歲月,想到知識(shí)體系的建立,知識(shí)體系分為正向知識(shí)體系和逆向知識(shí)體系;正向知識(shí)體系可以理解為教科書目錄,逆向知識(shí)體系可以理解考試真題。
按照知識(shí)體系建設(shè)這個(gè)思路,追求長(zhǎng)久的深刻的記憶。決定建立正向知識(shí)體系。本文系正向知識(shí)體系的第一篇。
原生js操作dom節(jié)點(diǎn):所謂的CRUD,代表create,read,update,del;也就是創(chuàng)建,讀取,更新和刪除。dom提供了api用于創(chuàng)建節(jié)點(diǎn)常用有
var div=document.createElement("div"); var p=document.createElement("p"); div.innerHTML="這是插入內(nèi)容"; var text=document.createTextNode("這是文本內(nèi)容"); var img=new Image();
創(chuàng)建元素、文本內(nèi)容和圖片。創(chuàng)建要和插入一起使用,所以
dom1.appendChild(div); dom1.insertBefore(div,dom1.querySelector("p")); function inertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if (parent.lastChild==targetElement) { parent.appendChild(newElement); }else{ parent.inertBefore(newElement,targetElement.nestSibling); } } document.getElementById('id名稱').preappend(div);//直接插入到父元素第一個(gè)位置 document.getElementById('id名稱').append(div);//直接插入到父元素最后位置 //還有另一個(gè)api dom1.insertAdjacentHTML("afterBegin","<h2> 在文本前容器內(nèi)插入內(nèi)容1</h2>"); dom1.insertAdjacentHTML("beforeEnd","<h3> 在文本后容器內(nèi)插入內(nèi)容2</h3>"); dom1.insertAdjacentHTML("beforeBegin","<h5> 在文本前容器外插入內(nèi)容4</h2>"); dom1.insertAdjacentHTML("afterEnd","<h6> 在文本后容器外插入內(nèi)容5</h3>");
讀取也就是選擇器的功能實(shí)現(xiàn)
//直接選擇器 var dom1=document.getElementById("dom1"); var dom1=document.querySelector("#dom1"); var matches = document.querySelectorAll("div.note, div.alert"); var div=document.getElementsByClassName(".div"); var div=document.getElementsByTagName("div"); //節(jié)點(diǎn)關(guān)系選擇器 var divC=div.innerHTML;//內(nèi)部 var divC=div.outerHTML;//整個(gè)節(jié)點(diǎn) var divS=div.children;//子節(jié)點(diǎn)集合 var divS=div.firstChild;//第一個(gè)子節(jié)點(diǎn),如果有空格返回#text var divS=div.lastChild;//最后一個(gè)子節(jié)點(diǎn),如果有空格返回#text var divS=div.nextSibling;//下一個(gè)節(jié)點(diǎn),如果有空格返回#text var divS=div.prvSibling;//前一個(gè)節(jié)點(diǎn),如果有空格返回#text var divS=div.parentNode;//父節(jié)點(diǎn) //節(jié)點(diǎn)集合 var form=document.forms[0];//表單集合 var img=document.images[0];//圖片集合 var img=document.links[0];//所有帶連接的a節(jié)點(diǎn)
然后是更新,我理解的是替換,常用實(shí)現(xiàn)
parent.replaceChild(div,dom1.querySelector("p")); dom1.innerHTML="hhh"; dom1.innerText="999";
最后是刪除的實(shí)現(xiàn)
parent.removeChild(dom1.querySelector("p")); dom1.innerHTML=""; dom1.innerText="";
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。