當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

如何用JavaScript判断dom是否有存在某class的值？

發(fā)布時(shí)間：2025/3/19 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了如何用JavaScript判断dom是否有存在某class的值？小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

例如：

判斷html節(jié)點(diǎn)的class是否有no-js。

1.jquery的實(shí)現(xiàn)方式

$("html").hasClass('no-js');

jquery源碼的實(shí)現(xiàn)方式：

源碼里面用到了nodeType，nodeType是HTML DOM 的nodeType 屬性，nodeType 屬性返回以數(shù)字值返回指定節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型。常用的一般有三種：

如果節(jié)點(diǎn)是元素節(jié)點(diǎn)（Element），則 nodeType 屬性將返回 1。

如果節(jié)點(diǎn)是屬性節(jié)點(diǎn)（Attr），則 nodeType 屬性將返回 2。

如果節(jié)點(diǎn)是文本節(jié)點(diǎn)（Text），則nodeType 屬性將返回 3。

例如，獲得 body 元素的節(jié)點(diǎn)類(lèi)型：

document.body.nodeType;//1

如果想了解更多的節(jié)點(diǎn)類(lèi)型，可查看：HTML DOM nodeType 屬性

2.js的實(shí)現(xiàn)方式

function hasClass(element, cls) {return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; }hasClass(document.querySelector("html"), 'no-js');

想詳細(xì)了解DOM選擇器querySelector，可點(diǎn)擊《JS基礎(chǔ)篇--原生JS強(qiáng)大DOM選擇器querySelector與querySelectorAll》。

3.H5的classList

說(shuō)明下：

字符串的indexOf方法是無(wú)法區(qū)分.no-js和.no-js-indeed這樣的類(lèi)；

類(lèi)名的分隔符可能不是空格，還有可能是\t等。

代碼：

問(wèn)題地址：https://segmentfault.com/q/1010000002501794

總結(jié)

以上是生活随笔為你收集整理的如何用JavaScript判断dom是否有存在某class的值？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。