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