創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元天涯做網(wǎng)站,已為上家服務(wù),為天涯各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

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

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

　　一、獲取節(jié)點(diǎn)

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

　　二、css選擇器

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

　　三、文檔結(jié)構(gòu)

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

　四、javascript操作DOM

document.getElementById("img1").alt;       // 獲取alt屬性
document.getElementById("img1").src=""; //設(shè)置src屬性
document.getElementById("img1").setAttribute("src", "1small.jpg");//非標(biāo)準(zhǔn)
document.getElementById("img1").getAttribute("class");//非標(biāo)準(zhǔn)
document.getElementsByClassName("cnblogs_code")[0].attributes;//返回節(jié)點(diǎn)的所有屬性

　　五、元素內(nèi)容及節(jié)點(diǎn)創(chuàng)建

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

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

本文標(biāo)題：JavaScript如何對DOM進(jìn)行操作-創(chuàng)新互聯(lián)
URL地址：http://weahome.cn/article/hcejs.html