本文實例講述了JS選取DOM元素常見操作方法。分享給大家供大家參考，具體如下：
JS選取DOM元素的方法
注意：原生JS選取DOM元素比使用jQuery類庫選取要快很多
1、通過ID選取元素
document.getElementById('myid');2、通過CLASS選取元素
document.getElementsByClassName('myclass')[0];3、通過標簽選取元素
document.getElementsByTagName('mydiv')[0];4、通過NAME屬性選取元素（常用于表單）
document.getElementsByName('myname')[0];JS修改CSS樣式
document.getElementById('myid').style.display = 'none';JS修改CLASS屬性
document.getElementById('myid').className = 'active';如果有多個CLASS屬性，即用空格隔開
document.getElementById('myid').className = 'active div-1';移除該元素上的所有CLASS
document.getElementById('myid').className = '';注意：使用classList會優(yōu)于使用className
document.getElementById('myid').classList.item(0);//item為類名的索引document.getElementById('myid').classList.length;//只讀屬性document.getElementById('myid').classList.add('newClass');//添加classdocument.getElementById('myid').classList.remove('newClass');//移除classdocument.getElementById('myid').classList.toggle('newClass');//切換，有則移除，沒有則添加document.getElementById('myid').classList.contains('newClass');//判斷是否存在該class補充：add和remove方法不允許鏈式操作，因為返回的都是undefined，其次，也不允許同時添加或刪除多個class，可以自行擴展一下
DOMTokenList.prototype.adds = function(tokens){ tokens.split(' ').forEach(function(token){ this.add(token); }).bind(this)); return this;};var clList = document.body.classList;clList.adds('a b c').toString();//a b cJS修改文本
document.getElementById('myid').innerHTML = '123';JS創(chuàng)建元素并向其中追加文本
var newdiv = document.createElement('div');var newtext = document.createTextNode('123');newdiv.appendChild(newtext);document.body.appendChild(newdiv);同理：removeChild()移除節(jié)點，并返回節(jié)點
cloneNode()復(fù)制節(jié)點
insertBefore()插入節(jié)點（父節(jié)點內(nèi)容的最前面）
注意：insertBefore()有兩個參數(shù)，第一個是插入的節(jié)點，第二個是插入的位置
例子：
var list = document.getElementById('myList');list.insertBefore(newItem,list.childNodes[1]);//插入新節(jié)點newItem到list的第二個子節(jié)點JS返回所有子節(jié)點對象childNodes
var mylist = document.getElementById('myid');for(var i=0,i<mylist.childNodes.length;i++){console.log(mylist.childNodes[i]);}firstChild返回第一個子節(jié)點
lastChild返回最后一個子節(jié)點
parentNode返回父節(jié)點對象
nextSibling返回下一個兄弟節(jié)點對象
previousSibling返回前一個兄弟節(jié)點對象
nodeName返回節(jié)點的HTML標記名稱
更多關(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è)計有所幫助。
新聞熱點
疑難解答
