快捷導(dǎo)航

基于原生js實現(xiàn)判斷元素是否有指定class名

更新時間：2020年07月11日 11:39:08 作者：小猿筆記

這篇文章主要介紹了基于原生js實現(xiàn)判斷元素是否有指定class名,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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)文章

JS中圖片壓縮的方法小結(jié)
這篇文章主要介紹了JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下
2017-11-11
setTimeout函數(shù)的神奇使用
setTimeout函數(shù)是一個原生的javascript函數(shù)。setTimeout函數(shù)會在一個指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個頁面一段時間后彈出一個對話框，或者是鼠標(biāo)點擊某個元素后隔幾秒鐘在刪除這個元素。
2017-02-02
Kendo Grid editing 自定義驗證報錯提示的解決方法
Kendo UI是一個強(qiáng)大的框架用于快速HTML5 UI開發(fā)。基于最新的HTML5、CSS3和JavaScript標(biāo)準(zhǔn)。今天小編通過分享本文給大家介紹Kendo Grid editing 自定義驗證報錯提示的解決方法
2016-11-11
使用uni-app開發(fā)微信小程序的實現(xiàn)
這篇文章主要介紹了使用uni-app開發(fā)微信小程序的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
javascript ie6兼容position:fixed實現(xiàn)思路
positon:fixed 讓HTML元素脫離文檔流固定在瀏覽器的某個位置，由于網(wǎng)頁中類似這樣的元素很多，所以本文的出現(xiàn)是很有必要的了，接下為大家介紹下javascript如何實現(xiàn)ie6下的position:fixed
2013-04-04
Javascript技術(shù)棧中的四種依賴注入詳解
這篇文章主要為大家詳細(xì)介紹了Javascript技術(shù)棧中的四種依賴注入，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript基于inquirer封裝一個控制臺文件選擇器
這篇文章主要介紹了JavaScript基于inquirer封裝一個控制臺文件選擇器，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-08-08
避免回車鍵導(dǎo)致的頁面無意義刷新的解決方法
相信大家在實現(xiàn)頁面局部刷新過程中都遇到過類似的問題：在文本框中輸入完要搜索的關(guān)鍵字段，按回車結(jié)果整個頁面刷新了，局部刷新肯定失敗。
2011-04-04
JS獲取DropDownList的value值與text值的示例代碼
本篇文章主要是對JS獲取DropDownList的value值與text值的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
JavaScript實現(xiàn)文字展開和收起效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)文字展開和收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09