如何使用javascript检查HTMLCollection是否包含具有给定类名的元素？
[英]How to check if an HTMLCollection contains an element with a given class name using javascript?
问题描述
Hi i am new to programming and i want to access the array inside an object using javascript... 
嗨，我是编程的新手，我想使用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. 在控制台中打印some_obj.children会产生以下输出。 object.children HTMLCollection(3) 0: div.someclassname 1: div.someclassname.highlight 2: div.someclassname 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. 现在从some_obj我想检查some_obj是否在children数组中有div.classname.highlight。 how can i do it. 我该怎么做。
i tried using some_obj.current.children.find() but says find is not a function. 我尝试使用some_obj.current.children.find（）但是说find不是一个函数。
how can i check if the some_obj children has the div.someclassname.highlight. 我该如何检查some_obj子节点是否有div.someclassname.highlight。 could someone help me fix this.thanks 有人可以帮我解决这个问题。谢谢
3 个解决方案
解决方案1
3 已采纳 2019-09-10 16:32:09
I don't think there is a more elegant solution for HTMLCollection , but this works. 我不认为HTMLCollection有更优雅的解决方案，但这有效。
<!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>
解决方案2
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) . 由于子节点不是简单的Array而是HTMLCollection和/或NodeList ，应该注意的是： 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 ). 因此，我们说，我们要找到某个元素div.someclassname.highlight上存在children与否（类名是测试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 . 注：以上测试将通过任何DOM元素与类名someclassname和highlight不仅仅是div 。 Element.classList.contains Array.from Array.find Element.classList.contains Array.from Array.find
解决方案3
0 2019-09-10 16:31:59
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.