您好,登錄后才能下訂單哦!
本文實(shí)例講述了JS選取DOM元素常見操作方法。分享給大家供大家參考,具體如下:
JS選取DOM元素的方法
注意:原生JS選取DOM元素比使用jQuery類庫(kù)選取要快很多
1、通過(guò)ID選取元素
document.getElementById('myid');
2、通過(guò)CLASS選取元素
document.getElementsByClassName('myclass')[0];
3、通過(guò)標(biāo)簽選取元素
document.getElementsByTagName('mydiv')[0];
4、通過(guò)NAME屬性選取元素(常用于表單)
document.getElementsByName('myname')[0];
JS修改CSS樣式
document.getElementById('myid').style.display = 'none';
JS修改CLASS屬性
document.getElementById('myid').className = 'active';
如果有多個(gè)CLASS屬性,即用空格隔開
document.getElementById('myid').className = 'active div-1';
移除該元素上的所有CLASS
document.getElementById('myid').className = '';
注意:使用classList會(huì)優(yōu)于使用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');//切換,有則移除,沒(méi)有則添加 document.getElementById('myid').classList.contains('newClass');//判斷是否存在該class
補(bǔ)充:add
和remove
方法不允許鏈?zhǔn)讲僮鳎驗(yàn)榉祷氐亩际?span >undefined,其次,也不允許同時(shí)添加或刪除多個(gè)class,可以自行擴(kuò)展一下
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創(chuàng)建元素并向其中追加文本
var newdiv = document.createElement('div'); var newtext = document.createTextNode('123'); newdiv.appendChild(newtext); document.body.appendChild(newdiv);
同理:removeChild()
移除節(jié)點(diǎn),并返回節(jié)點(diǎn)
cloneNode()
復(fù)制節(jié)點(diǎn)
insertBefore()
插入節(jié)點(diǎn)(父節(jié)點(diǎn)內(nèi)容的最前面)
注意:insertBefore()
有兩個(gè)參數(shù),第一個(gè)是插入的節(jié)點(diǎn),第二個(gè)是插入的位置
例子:
var list = document.getElementById('myList'); list.insertBefore(newItem,list.childNodes[1]); //插入新節(jié)點(diǎn)newItem到list的第二個(gè)子節(jié)點(diǎn)
JS返回所有子節(jié)點(diǎn)對(duì)象childNodes
var mylist = document.getElementById('myid'); for(var i=0,i<mylist.childNodes.length;i++){ console.log(mylist.childNodes[i]); }
firstChild返回第一個(gè)子節(jié)點(diǎn)
lastChild返回最后一個(gè)子節(jié)點(diǎn)
parentNode返回父節(jié)點(diǎn)對(duì)象
nextSibling返回下一個(gè)兄弟節(jié)點(diǎn)對(duì)象
previousSibling返回前一個(gè)兄弟節(jié)點(diǎn)對(duì)象
nodeName返回節(jié)點(diǎn)的HTML標(biāo)記名稱
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。