原生javascript的一些經常使用方法

JS選取DOM元素的方法
注意：原生JS選取DOM元素比使用jQuery類庫選取要快不少
一、經過ID選取元素
document.getElementById('myid');
二、經過CLASS選取元素
document.getElementsByClassName('myclass')[0];
三、經過標籤選取元素
document.getElementsByTagName('mydiv')[0];
四、經過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');//添加class

document.getElementById('myid').classList.remove('newClass');//移除class

document.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的第二個子節點

JS返回全部子節點對象childNodesvar mylist = document.getElementById('myid');for(var i=0,i<mylist.childNodes.length;i++){console.log(mylist.childNodes[i]);}firstChild返回第一個子節點lastChild返回最後一個子節點parentNode返回父節點對象nextSibling返回下一個兄弟節點對象previousSibling返回前一個兄弟節點對象nodeName返回節點的HTML標記名稱