原生JS常用的一些方法

JS修改CSS样式

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

JS修改CLASS属性

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

补充：add和remove方法不允许链式操作，因为返回的都是undefined，其次，也不允许同时添加或删除多个class， 

//如果有多个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

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标记名称