JS選取DOM元素常見(jiàn)操作方法實(shí)例分析
本文實(shí)例講述了JS選取DOM元素常見(jiàn)操作方法。分享給大家供大家參考，具體如下：
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屬性，即用空格隔開(kāi)
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 style="color: #0000ff">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ì)有所幫助。
- JavaScript學(xué)習(xí)筆記之DOM操作實(shí)例分析
- 在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)
- JS常見(jiàn)DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】
- JavaScript DOM元素常見(jiàn)操作詳解【添加、刪除、修改等】
- 學(xué)習(xí)JS中的DOM節(jié)點(diǎn)以及操作
- JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
- 詳解JS獲取HTML DOM元素的8種方法
- javascript 獲取HTML DOM父、子、臨近節(jié)點(diǎn)
- JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作實(shí)例小結(jié)
相關(guān)文章
js獲取html頁(yè)面代碼中圖片地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了js獲取html代碼中圖片地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03
利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果(實(shí)例代碼)
這篇文章主要是對(duì)利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果的兩種方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了js獲取域名的方法,涉及window.location中常見(jiàn)方法的使用技巧,需要的朋友可以參考下2015-01-01
原生JS實(shí)現(xiàn)的多個(gè)彩色小球跟隨鼠標(biāo)移動(dòng)動(dòng)畫(huà)效果示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的多個(gè)彩色小球跟隨鼠標(biāo)移動(dòng)動(dòng)畫(huà)效果,涉及javascript事件響應(yīng)、頁(yè)面元素屬性動(dòng)態(tài)修改及隨機(jī)數(shù)應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
uniapp退出關(guān)閉當(dāng)前小程序或APP的簡(jiǎn)單實(shí)現(xiàn)
最近通過(guò)Uniapp開(kāi)發(fā)APP又一個(gè)非常實(shí)用的功能,這篇文章主要給大家介紹了關(guān)于uniapp退出關(guān)閉當(dāng)前小程序或APP的簡(jiǎn)單實(shí)現(xiàn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念，它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)，有興趣的可以了解一下。2017-04-04
網(wǎng)絡(luò)請(qǐng)求axios與fetch的區(qū)別及使用示例
Fetch和Axios是兩個(gè)常用的JavaScript庫(kù),用于處理數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于網(wǎng)絡(luò)請(qǐng)求axios與fetch的區(qū)別及使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
uni-app??? 是一個(gè)使用 ???Vue.js?? 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái)，這篇文章主要介紹了uni-app的基本使用,需要的朋友可以參考下2022-11-11
javascript組合使用構(gòu)造函數(shù)模式和原型模式實(shí)例
這篇文章主要介紹了javascript組合使用構(gòu)造函數(shù)模式和原型模式的方法,通過(guò)一個(gè)簡(jiǎn)單實(shí)例分析了javascript構(gòu)造函數(shù)模式與原型模式的使用方法,需要的朋友可以參考下2015-06-06
JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解
對(duì)象的constructor屬性用于返回創(chuàng)建該對(duì)象的函數(shù)，也就是我們常說(shuō)的構(gòu)造函數(shù)，除了創(chuàng)建對(duì)象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object)2015-11-11