原生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="";

本文結束。