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