原生JS常用的一些方法
阿新 • • 發佈:2019-02-01
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
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()複製節點
JS返回所有子節點物件childNodes
var 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標記名稱
注意:原生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');//新增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返回所有子節點物件childNodes
var 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標記名稱