本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考,具体如下:
JS选取DOM元素的方法
注意:原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
1 | document.getElementById( 'myid' ); |
2、通过CLASS选取元素
1 | document.getElementsByClassName( 'myclass' )[0]; |
3、通过标签选取元素
1 | document.getElementsByTagName( 'mydiv' )[0]; |
4、通过NAME属性选取元素(常用于表单)
1 | document.getElementsByName( 'myname' )[0]; |
JS修改CSS样式
1 | document.getElementById( 'myid' ).style.display = 'none' ; |
JS修改CLASS属性
1 | document.getElementById( 'myid' ).className = 'active' ; |
如果有多个CLASS属性,即用空格隔开
1 | document.getElementById( 'myid' ).className = 'active div-1' ; |
移除该元素上的所有CLASS
1 | document.getElementById( 'myid' ).className = '' ; |
注意:使用classList会优于使用className
1 2 3 4 5 6 | 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,可以自行扩展一下
1 2 3 4 5 6 7 8 9 | 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修改文本
1 | document.getElementById( 'myid' ).innerHTML = '123' ; |
JS创建元素并向其中追加文本
1 2 3 4 | var newdiv = document.createElement( 'div' ); var newtext = document.createTextNode( '123' ); newdiv.appendChild(newtext); document.body.appendChild(newdiv); |
同理:removeChild()
移除节点,并返回节点
cloneNode()
复制节点
insertBefore()
插入节点(父节点内容的最前面)
注意:insertBefore()
有两个参数,第一个是插入的节点,第二个是插入的位置
例子:
1 2 3 | var list = document.getElementById( 'myList' ); list.insertBefore(newItem,list.childNodes[1]); //插入新节点newItem到list的第二个子节点 |
JS返回所有子节点对象childNodes
1 2 3 4 | 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标记名称