JS选取DOM元素常见操作方法实例分析

document.getElementById('myid');

document.getElementsByClassName('myclass')[0];

document.getElementsByTagName('mydiv')[0];

document.getElementsByName('myname')[0];

document.getElementById('myid').style.display = 'none';

document.getElementById('myid').className = 'active';

document.getElementById('myid').className = 'active div-1';

document.getElementById('myid').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

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

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

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

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

var mylist = document.getElementById('myid');
for(var i=0,i<mylist.childNodes.length;i++){
console.log(mylist.childNodes[i]);
}