基于原生js實(shí)現(xiàn)判斷元素是否有指定class名
更新時(shí)間：2020年07月11日 11:39:08 作者：小猿筆記
這篇文章主要介紹了基于原生js實(shí)現(xiàn)判斷元素是否有指定class名,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
【注意】以下方法只對(duì)class只有一個(gè)值的情況下操作
結(jié)構(gòu)部分：
<div> <p>1</p> <p class="test">2</p> <p>3</p> </div>
js部分：
var p = document.getElementsByTagName('p');
for(var i = 0;i <p.length;i++){
//第一種方法，用classList這個(gè)H5 API，有兼容性問題
if(p[i].classList.contains('test')==true){
console.log(p[i].innerHTML);
}
//第二種方法，用className這個(gè)屬性
if(p[i].className=='test'){
console.log(p[i].innerHTML)
}
//第三種方法，用getAttribute()這個(gè)方法
if(p[i].getAttribute("class")=='test'){
console.log(p[i].innerHTML);
}
}
以上三種可以任選，條件是不考慮兼容性和多個(gè)class名的情況
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js中設(shè)置元素class的三種方法小結(jié)
- js獲取class的所有元素
- js獲取某元素的class里面的css屬性值代碼
- javaScript給元素添加多個(gè)class的簡單實(shí)現(xiàn)
- js通過元素class名字獲取元素集合的具體實(shí)現(xiàn)
- js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼（用class）
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript通過class來獲取元素實(shí)現(xiàn)代碼
- js如何根據(jù)class獲取元素并且點(diǎn)擊元素詳解
相關(guān)文章
javascript中的try catch異常捕獲機(jī)制用法分析
這篇文章主要介紹了javascript中的try catch異常捕獲機(jī)制,簡單分析了try catch異常捕獲機(jī)制的基本定義與使用方法,需要的朋友可以參考下2016-12-12
JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
JavaScript中運(yùn)算符規(guī)則的隱式類型轉(zhuǎn)換是什么? 這是每個(gè)學(xué)習(xí)Javascript的新手們都應(yīng)該知道的一個(gè)問題，下面這篇文章主要給大家介紹了關(guān)于JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09 
這篇文章主要介紹了微信小程序wx.request的簡單封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11 
打開網(wǎng)頁時(shí)提示 Stack overflow at line: 0。img圖片的onerror事件需要注意的細(xì)節(jié)。
2011-01-01 
JavaScript設(shè)計(jì)模式之代理模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式介紹,代理模式顧名思義就是用一個(gè)類來代替另一個(gè)類來執(zhí)行方法功能,需要的朋友可以參考下
2014-12-12 
javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用詳細(xì)教程
本地存儲(chǔ)localstorage是一種在瀏覽器中存儲(chǔ)數(shù)據(jù)的方式,可以將數(shù)據(jù)保存在用戶的本地計(jì)算機(jī)上,以便在下一次訪問網(wǎng)站時(shí)使用,下面這篇文章主要給大家介紹了關(guān)于javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用詳細(xì)教程,需要的朋友可以參考下
2023-05-05 
Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法，使得我們可以簡單的對(duì)數(shù)組進(jìn)行排序操作和逆序操作
2012-06-06 
JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05 
JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,需要的朋友可以參考下
2017-07-07