本文實(shí)例講述了JS選取DOM元素常見操作方法。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十余年時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都鑿毛機(jī)等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致稱譽(yù)。

JS選取DOM元素的方法

注意：原生JS選取DOM元素比使用jQuery類庫選取要快很多

1、通過ID選取元素

document.getElementById('myid');

2、通過CLASS選取元素

document.getElementsByClassName('myclass')[0];

3、通過標(biāo)簽選取元素

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';

如果有多個(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');//切換，有則移除，沒有則添加
document.getElementById('myid').classList.contains('newClass');//判斷是否存在該class

補(bǔ)充：add和remove方法不允許鏈?zhǔn)讲僮?，因?yàn)榉祷氐亩际莡ndefined，其次，也不允許同時(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頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

當(dāng)前名稱：JS選取DOM元素常見操作方法實(shí)例分析
當(dāng)前地址：http://chinadenli.net/article6/ihshig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、云服務(wù)器、網(wǎng)站制作、面包屑導(dǎo)航、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)