How to check if an HTMLCollection contains an element with a given class name using javascript?

Question

Hi i am new to programming and i want to access the array inside an object using javascript...

i have the datastructure like below,

const some_obj = {
    accessKey: "",
    children: [
        div.someclassname,
        div.someclassname,
        div.someclassname.highlight,
    ]
}

Below is what it looks like in browser console when i log the variable.

object
current: div.wrapper
    accessKey: ""
    align: ""
    childElementCount: 4
    childNodes: NodeList(4) [div.someclassname, div.someclassname.highlight, 
    div.someclassname]
    children: HTMLCollection(4) [div.someclassname, 
    div.someclassname.highlight, div.someclassname]

printing some_obj.children in the console gives below output. object.children HTMLCollection(3) 0: div.someclassname 1: div.someclassname.highlight 2: div.someclassname

Now from the some_obj i want to check if some_obj has div.classname.highlight in children array. how can i do it.

i tried using some_obj.current.children.find() but says find is not a function.

how can i check if the some_obj children has the div.someclassname.highlight. could someone help me fix this.thanks

Possible duplicate of [How to find if an array contains a specific string in JavaScript/jQuery?](https://stackoverflow.com/questions/6116474/how-to-find-if-an-array-contains-a-specific-string-in-javascript-jquery) — wentjun, Sep 10 '19 at 16:37
from the output in console it is a htmlcollection. i think it is not a string. — someuser2491, Sep 10 '19 at 16:42

ambianBeing · Answer 1 · 2022-10-09T16:32:42.463

7

Since the children are not simple Array but HTMLCollection, what should be looked at is: Array.from(NodeList).

So let say we want to find if an element div.someclassname.highlight exists on the children or not (testing for class name someclassname & highlight).

let childrenNodeArr = Array.from(some_obj.children);
/*or with spread operator [...some_obj.children]*/
/*each element is a dom node we can run classList.contains*/
const elemFound = childrenNodeArr.find(
  e =>
    e.classList.contains("someclassname") && e.classList.contains("highlight")
);

if (elemFound) {
  /*yes a div.someclassname.highlight*/
}

NOTE: The above test would pass for any dom element with class names someclassname & highlight not just the div. Element.classList.contains Array.from Array.find

edited Oct 09 '22 at 16:32

answered Sep 10 '19 at 17:26

ambianBeing

3,449
2
14
25

1

Note: `Array.from` doesn’t work in IE and older browsers. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility – sunknudsen Sep 10 '19 at 17:39
1

@sunknudsen Yep I know +1. IE could be the only caveat. Rest of the broswers support is pretty much there, unless somebody is on like really old version. For example: Chrome 45 came in `2015` – ambianBeing Sep 10 '19 at 17:45
1

thanks for the answer. since i wanted it to support all browsers i accepted the other one. but this works as well :) – someuser2491 Sep 10 '19 at 19:08

sunknudsen · Accepted Answer · 2019-09-10T17:37:13.357

4

I don’t think there is a more elegant solution for HTMLCollection, but this works.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style>
      .selected {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="test">One</li>
      <li class="test">two</li>
      <li class="test selected">Three</li>
    </ul>
    <script>
      var find = function(className) {
        var elements = document.getElementsByClassName('test');
        var elementsArray = [].slice.call(elements);
        for (var index = 0; index < elementsArray.length; index++) {
          var element = elementsArray[index];
          if (element.className.indexOf(className) !== -1) {
            return true;
            // return element; // If you wish to return the element instead of true (comment out previous line if this option is used)
          }
        }
        return false;
        // return null; // If you wish to return null instead of false (comment out previous line if this option is used)
      }
      console.log(find('selected'));
    </script>
  </body>
</html>

edited Sep 10 '19 at 17:37

answered Sep 10 '19 at 16:32

sunknudsen

6,356
3
39
76

for some strange reason it says indexOf is not a function. – someuser2491 Sep 10 '19 at 16:37
Can you please paste the output of `console.log(some_obj, some_obj.children)` in your question? – sunknudsen Sep 10 '19 at 16:39
1

If this is what you are looking for, I would recommend changing the title to `How to check if an HTMLCollection object contains an element with a given class name`. – sunknudsen Sep 10 '19 at 16:56
I see you updated the title. Did the above snippet work? Just added IE support. – sunknudsen Sep 10 '19 at 17:05
thanks how do i return the element that contains the test selected classname instead of true. – someuser2491 Sep 10 '19 at 17:15
`[].slice.call(elements)[0]` results in `undefined`, but `elements` is an HtmlCollection and has elements. – Timo Jul 11 '22 at 13:38

score 0 · Answer 3 · answered Sep 10 '19 at 16:31

0

Sounds like you're looking for some_obj.children.includes(someClass).

See includes.

answered Sep 10 '19 at 16:31

Alex Broadwin

1,288
11
23

1

doesnt work either. i shall update my question with the datastructure again. – someuser2491 Sep 10 '19 at 16:37

How to check if an HTMLCollection contains an element with a given class name using javascript?

3 Answers3