本文實例講述了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會優于使用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 c

JS修改文本

document.getElementById('myid').innerHTML = '123';

JS創建元素并向其中追加文本

var newdiv = document.createElement('div');var newtext = document.createTextNode('123');newdiv.appendChild(newtext);document.body.appendChild(newdiv);

同理：removeChild()移除節點，并返回節點

cloneNode()復制節點

insertBefore()插入節點（父節點內容的最前面）

注意：insertBefore()有兩個參數，第一個是插入的節點，第二個是插入的位置

例子：

var list = document.getElementById('myList');list.insertBefore(newItem,list.childNodes[1]);//插入新節點newItem到list的第二個子節點