這篇文章主要介紹了原生js實現針對Dom節點的CRUD操作,結合實例形式分析了javascript操作dom節點的創建、獲取、增刪改查等相關操作技巧,需要的朋友可以參考下
本文實例講述了原生js實現針對Dom節點的CRUD操作。分享給大家供大家參考,具體如下:
知識點,依然會遺忘。我在思考到底是什麼原因。想到研究生考試準備的那段歲月,想到知識體系的建立,知識體系分爲正向知識體系和逆向知識體系;正向知識體系可以理解爲教科書目錄,逆向知識體系可以理解考試真題。
按照知識體系建設這個思路,追求長久的深刻的記憶。決定建立正向知識體系。本文系正向知識體系的第一篇。
原生js操作dom節點:所謂的CRUD,代表create,read,update,del;也就是創建,讀取,更新和刪除。dom提供了api用於創建節點常用有
var div=document.createElement("div"); var p=document.createElement("p"); div.innerHTML="這是插入內容"; var text=document.createTextNode("這是文本內容"); var img=new Image();
創建元素、文本內容和圖片。創建要和插入一起使用,所以
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);//直接插入到父元素第一個位置 document.getElementById('id名稱').append(div);//直接插入到父元素最後位置 //還有另一個api dom1.insertAdjacentHTML("afterBegin","<h1> 在文本前容器內插入內容1</h1>"); dom1.insertAdjacentHTML("beforeEnd","<h2> 在文本後容器內插入內容2</h2>"); dom1.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入內容4</h1>"); dom1.insertAdjacentHTML("afterEnd","<h5> 在文本後容器外插入內容5</h2>");
讀取也就是選擇器的功能實現
//直接選擇器 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"); //節點關係選擇器 var divC=div.innerHTML;//內部 var divC=div.outerHTML;//整個節點 var divS=div.children;//子節點集合 var divS=div.firstChild;//第一個子節點,如果有空格返回#text var divS=div.lastChild;//最後一個子節點,如果有空格返回#text var divS=div.nextSibling;//下一個節點,如果有空格返回#text var divS=div.prvSibling;//前一個節點,如果有空格返回#text var divS=div.parentNode;//父節點 //節點集合 var form=document.forms[0];//表單集合 var img=document.images[0];//圖片集合 var img=document.links[0];//所有帶連接的a節點
然後是更新,我理解的是替換,常用實現
parent.replaceChild(div,dom1.querySelector("p")); dom1.innerHTML="hhh"; dom1.innerText="999";
最後是刪除的實現
parent.removeChild(dom1.querySelector("p")); dom1.innerHTML=""; dom1.innerText="";
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。