If Div with certain class exists, do something with Javascript

Question

I have a class and if it exists, I want to use the variable as a true/false if statement.

HTML

<div id="snake" class="snake--mobile">

JS

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion !== null)
  alert('xx');

However, it’s not working. Any ideas? No jQuery answers, please.

possible duplicate of [How to check if an element exist into another element?](http://stackoverflow.com/questions/7174122/how-to-check-if-an-element-exist-into-another-element) — davidcondrey, Oct 08 '14 at 10:45
http://stackoverflow.com/questions/5783280/check-if-div-with-certain-class-name-exists — davidcondrey, Oct 08 '14 at 11:03

score 74 · Accepted Answer · answered Oct 08 '14 at 10:44

74

getElementsByClassName returns a NodeList which is an array-like object. You can check its length to determine if elements with defined class exist:

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
    // elements with class "snake--mobile" exist
}

answered Oct 08 '14 at 10:44

VisioN

143,310
32
282
281

I got this `Cannot read properties of undefined (reading 'length'` – Salem May 29 '22 at 20:24

score 13 · Answer 2 · edited Jun 19 '22 at 10:05

13

Here is very sample solution for check class (hasClass) in Javascript:

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
    // do something if 'hasClass' is exist.
}

edited Jun 19 '22 at 10:05

kalucki23

172
4
15

answered Mar 10 '21 at 20:41

Rifat Wahid Alif

191
2
5

Yup, "contains" is the way to go here... ex. `if( document.getElementById("MyElement").classList.contains('special-class') ) { console.log('Found!') }` – Paul Brady Oct 15 '21 at 21:35
Thanks a lot `querySelector` solved the problem now I got `null` if the class isn't existing. – Salem May 29 '22 at 20:35
This should definitely be the accepted answer. – henxdl May 02 '23 at 14:04

score 6 · Answer 3 · answered Oct 08 '14 at 10:44

6

getElementsByClassName returns a NodeList. It will never be null. It might have a .length of 0.

answered Oct 08 '14 at 10:44

Quentin

914,110
126
1,211
1,335

@Salem — Umm. Yes? So `getElementsByClassName` *doesn't* return `null` and `[0]` is `undefined` because it has a `length` of `0` … just like this answer says. – Quentin May 29 '22 at 20:34

Krupesh Kotecha · Answer 4 · 2015-10-20T09:15:14.297

5

I have tested it. its completely working . you might done any other mistake. getElementsByClassName return empty if no element found with given class name or return list of elements that have given class. so you can access it using index.

var isMobileVersion = document.getElementsByClassName('snake--mobile');
if (isMobileVersion.length > 0) {
  isMobileVersion[0].style.color="red";
  alert('class exist');
}

<div id="snake" class="snake--mobile">Class Exist div </div>

edited Oct 20 '15 at 09:15

answered Aug 31 '15 at 08:20

Krupesh Kotecha

2,396
3
21
40

**You are wrong.** `getElementsByClassName` never returns `null`. In your example you check the result for being not `null`, which will always be `true`, as `NodeList` object is not falsy. Try checking against "class *not* exist" and you will see. – VisioN Oct 20 '15 at 07:46
i have checked my example. it will return empty object if class not found. thanx @VisioN for correcting my mistake – Krupesh Kotecha Oct 20 '15 at 09:02
Nevertheless, your update didn't fix the problem, as `if (x)` will still check for `true` value. The only way to assess if elements exist is to compare `length` property with `0`, as was described in the other answers. – VisioN Oct 20 '15 at 09:11

sagar buddhi · Answer 5 · 2020-05-21T09:42:08.487

querySelector() method from document returns the first Element that matches the specified selector otherwise returns null if there is no match query selector reference.

 Syntax
 element = document.querySelector(selectors);

console.log(`existing-class element ${document.querySelector('.existing-class')}`)

console.log(`non-existing-class element ${document.querySelector('.non-existing-class')}`)

if(document.querySelector('.existing-class')) {
  alert('inside if block')
}

<div class="existing-class">

explicit null check with if statement is not required, since null is a falsey value when encountered in a boolean context, using the output of querySelector will work falsey reference

score -1 · Answer 6 · edited Dec 11 '19 at 10:51

-1

var id=$("#main .slides .gallery-cell.is-selected").attr('id');
var isselected = document.getElementById(id);
isselected.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

edited Dec 11 '19 at 10:51

sɐunıɔןɐqɐp

3,332
15
36
40

answered Dec 11 '19 at 10:31

Md Sabbul Ansari

9
2

2

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks – sɐunıɔןɐqɐp Dec 11 '19 at 10:51

If Div with certain class exists, do something with Javascript

6 Answers6