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

本文实例讲述了js选取dom元素常见操作方法。分享给大家供大家参考，具体如下：

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

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

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。