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
3 answers
solution1
3 ACCPTED 2019-09-10 16:32:09
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>
solution2
1 2019-09-10 17:26:20
Since the children are not simple Array but HTMLCollection and/or NodeList , 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
solution3
0 2019-09-10 16:31:59
Sounds like you're looking for some_obj.children.includes(someClass).
See includes .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.