JavaScript如何對DOM進行操作

這篇文章運用簡單易懂的例子給大家介紹JavaScript如何對DOM進行操作，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

JavaScript操作DOM的方法有：1、獲取節點，代碼為【document.getElementById();】；2、css選擇器，代碼為【document.querySelector()】；3、文檔結構，代碼為【parentNod】。

　　一、獲取節點

document.getElementById();//id=""
document.getElementsByName();//name=""
document.getElementsByTagName();//"input"
document.getElementsByClassName();//class=""

　　二、css選擇器

document.querySelector();//根據css選擇器規則返回第一個匹配到的元素，"#div1>p"
document.querySelectorAll();//返回所有匹配到的元素

　　三、文檔結構

//(1)作為節點數的文檔
    parentNode    //獲取該節點的父節點   
    childNodes    //獲取該節點的子節點數組
    firstChild    //獲取該節點的第一個子節點
    lastChild    //獲取該節點的最后一個子節點
    nextSibling    //獲取該節點的下一個兄弟元素
    previoursSibling    //獲取該節點的上一個兄弟元素
    nodeType    //節點的類型，9代表Document節點，1代表Element節點，3代表Text節點，8代表Comment節點，11代表DocumentFragment節點
    nodeVlue    //Text節點或Comment節點的文本內容
    nodeName    //元素的標簽名(如P,SPAN,#text(文本節點),DIV)，以大寫形式表示
    //注意，以上6個方法連元素節點也算一個節點
//(2)作為元素樹的文檔
    firstElementChild        //第一個子元素節點
    lastElementChild        //最后一個子元素節點
    nextElementSibling        //下一個兄弟元素節點
    previousElementSibling    //前一個兄弟元素節點
    childElementCount        //子元素節點個數量
    //注意，此5個方法文本節點不算進去

　　四、javascript操作DOM

document.getElementById("img1").alt;       // 獲取alt屬性
document.getElementById("img1").src=""; //設置src屬性
document.getElementById("img1").setAttribute("src", "1small.jpg");//非標準
document.getElementById("img1").getAttribute("class");//非標準
document.getElementsByClassName("cnblogs_code")[0].attributes;//返回節點的所有屬性

　　五、元素內容及節點創建

innerText、textContent //innerText與textContent的區別，當文本為空時，innerText是""，而textContent是undefined
innerHTML
document.createTextNode("<p>我是一個javascript新建的節點</p>");
document.createElement("p");//創建p節點
appendChild();    //將一個節點插入到調用節點的最后面
insertBefore();    //接受兩個參數，第一個為待插入的節點，第二個指明在哪個節點前面，如果不傳入第二個參數，則跟appendChild一樣，放在最后。
removeChild();    //由父元素調用，刪除一個子節點。注意是直接父元素調用，刪除直接子元素才有效，刪除孫子元素就沒有效果了。
replaceChild();   //刪除一個子節點，并用一個新節點代替它，第一個參數為新建的節點，第二個節點為被替換的節點
cloneNode();      //克隆節點,參數true
document.getElementById("div1").style.backgroundColor="#fff";

關于JavaScript如何對DOM進行操作就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。