如何使用javascript检查HTMLCollection是否包含具有给定类名的元素?
嗨,我是编程新手,我想使用javascript访问对象内部的数组 我的数据结构如下所示如何使用javascript检查HTMLCollection是否包含具有给定类名的元素?,javascript,Javascript,嗨,我是编程新手,我想使用javascript访问对象内部的数组 我的数据结构如下所示 const some_obj = { accessKey: "", children: [ div.someclassname, div.someclassname, div.someclassname.highlight, ] } 下面是我在浏览器控制台中记录变量时的样子 object current: div.wrapper
const some_obj = {
accessKey: "",
children: [
div.someclassname,
div.someclassname,
div.someclassname.highlight,
]
}
下面是我在浏览器控制台中记录变量时的样子
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]
在控制台中打印一些_obj.children将给出以下输出。
对象.儿童
HTMLCollection(3)
0:div.someclassname
1:div.someclassname.highlight
2:div.someclassname
现在,从some_obj中,我想检查some_obj是否在子数组中具有div.classname.highlight。我该怎么做呢
我试着用
一些对象current.children.find()但是说find不是一个函数
如何检查some_obj子级是否具有div.someclassname.highlight。有人能帮我解决这个问题吗?谢谢听起来你好像在找一些孩子。包括(someClass)
请参阅。我认为没有比
HTMLCollection
更优雅的解决方案,但这是可行的
.选定{
字体大小:粗体;
}
- 一个
两个
- 三个
var find=函数(类名){
var elements=document.getElementsByClassName('test');
var elementsArray=[].slice.call(元素);
对于(var index=0;index
由于子项不是简单的数组
,而是HTMLCollection和/或节点列表,因此应该查看的是:Array.from(NodeList)
假设我们想找到div.someclassname.highlight
元素是否存在于子元素上(测试类名someclassname
&highlight
)
注意:上述测试将通过任何具有类名someclassname
和高亮显示的dom元素,而不仅仅是div
Hi可能重复,是div.classname。突出显示a字符串?从控制台的输出中,它是一个htmlcollection。我认为它不是一个字符串。出于某种奇怪的原因,它说indexOf不是一个函数。你能在你的问题中粘贴console.log(some_obj,some_obj.children)
的输出吗?如果这是你要找的,我建议将标题更改为如何检查HTMLCollection对象是否包含具有给定类名的元素。我看到您更新了标题。上面的代码片段有用吗?刚刚添加了IE支持。谢谢。我如何返回包含测试所选类名的元素,而不是true。也不起作用。我将再次用数据结构更新我的问题。注意:Array.from
在IE和旧浏览器中不起作用。见@sunknudsen Yep我知道+1。这可能是唯一的警告。broswers的其他支持几乎都在那个里,除非有人像真正的老版本一样在那个里。例如:Chrome 45进入了2015
谢谢你的回答。因为我希望它支持所有浏览器,所以我接受了另一个。但这同样有效:)
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*/
}