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]);
}