亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

原生js實現(xiàn)針對Dom節(jié)點的CRUD操作示例

 更新時間：2019年08月26日 11:28:59   作者：zhensg  
這篇文章主要介紹了原生js實現(xiàn)針對Dom節(jié)點的CRUD操作,結(jié)合實例形式分析了javascript操作dom節(jié)點的創(chuàng)建、獲取、增刪改查等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了原生js實現(xiàn)針對Dom節(jié)點的CRUD操作。分享給大家供大家參考，具體如下：

知識點，依然會遺忘。我在思考到底是什么原因。想到研究生考試準(zhǔn)備的那段歲月，想到知識體系的建立，知識體系分為正向知識體系和逆向知識體系；正向知識體系可以理解為教科書目錄，逆向知識體系可以理解考試真題。

按照知識體系建設(shè)這個思路，追求長久的深刻的記憶。決定建立正向知識體系。本文系正向知識體系的第一篇。

原生js操作dom節(jié)點：所謂的CRUD，代表create，read，update，del；也就是創(chuàng)建，讀取，更新和刪除。dom提供了api用于創(chuàng)建節(jié)點常用有

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);//直接插入到父元素第一個位置
document.getElementById('id名稱').append(div);//直接插入到父元素最后位置
//還有另一個api
dom1.insertAdjacentHTML("afterBegin","<h1> 在文本前容器內(nèi)插入內(nèi)容1</h1>"); 
dom1.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器內(nèi)插入內(nèi)容2</h2>"); 
dom1.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入內(nèi)容4</h1>"); 
dom1.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入內(nèi)容5</h2>");

讀取也就是選擇器的功能實現(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é)點關(guān)系選擇器
var divC=div.innerHTML;//內(nèi)部
var divC=div.outerHTML;//整個節(jié)點
var divS=div.children;//子節(jié)點集合
var divS=div.firstChild;//第一個子節(jié)點，如果有空格返回#text
var divS=div.lastChild;//最后一個子節(jié)點，如果有空格返回#text
var divS=div.nextSibling;//下一個節(jié)點，如果有空格返回#text
var divS=div.prvSibling;//前一個節(jié)點，如果有空格返回#text
var divS=div.parentNode;//父節(jié)點
//節(jié)點集合
var form=document.forms[0];//表單集合
var img=document.images[0];//圖片集合
var img=document.links[0];//所有帶連接的a節(jié)點

然后是更新，我理解的是替換，常用實現(xiàn)

parent.replaceChild(div,dom1.querySelector("p"));
dom1.innerHTML="hhh";
dom1.innerText="999";

最后是刪除的實現(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錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論