如何使用javascript检查HTMLCollection是否包含具有给定类名的元素?
如何使用javascript检查HTMLCollection是否包含具有给定类名的元素?
大家好,我是新手程序员,想使用JavaScript访问对象中的数组...\n我有以下数据结构,\n
const some_obj = { accessKey: "", children: [ div.someclassname, div.someclassname, div.someclassname.highlight, ] }
\n下面是在浏览器控制台中记录变量时的输出。\n
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]
\n在控制台中打印some_obj.children会得到以下输出。\n object.children \n HTMLCollection(3)\n 0: div.someclassname\n 1: div.someclassname.highlight\n 2: div.someclassname\n现在我想从some_obj中检查children数组是否有div.classname.highlight。我该怎么做呢?\n我尝试使用\n some_obj.current.children.find()但显示find不是一个函数。\n我怎样才能检查some_obj的children是否有div.someclassname.highlight。有人能帮我修复这个问题吗?谢谢。
问题的原因是想要检查一个HTMLCollection是否包含具有给定类名的元素,但是尝试使用some_obj.children.includes(someClass)的方法并没有成功。需要更新问题中的数据结构。
解决方法是使用JavaScript的一些方法来检查HTMLCollection中是否存在具有指定类名的元素。具体方法如下:
1. 首先,需要获取到HTMLCollection对象。可以使用document.getElementsByClassName()方法来获取具有指定类名的元素集合。
2. 然后,可以使用Array.from()方法将HTMLCollection对象转换为数组。这样可以使用数组的一些方法来处理元素集合。
3. 接下来,可以使用数组的一些方法来检查是否存在具有指定类名的元素。可以使用Array.prototype.some()方法来遍历数组,并对每个元素应用一个函数。如果函数对任何元素返回true,则some()方法返回true,否则返回false。
4. 在函数中,可以使用element.classList.contains()方法来检查元素是否具有指定的类名。该方法返回一个布尔值,指示元素是否具有指定的类名。
下面是使用上述方法来检查HTMLCollection中是否存在具有指定类名的元素的代码示例:
function checkIfElementExistsWithClassName(className) { var elements = document.getElementsByClassName(className); var elementsArray = Array.from(elements); var exists = elementsArray.some(function(element) { return element.classList.contains(className); }); return exists; }
可以调用checkIfElementExistsWithClassName()函数,并传入要检查的类名作为参数。该函数将返回一个布尔值,指示HTMLCollection中是否存在具有指定类名的元素。
HTMLCollection是一种类似数组的对象,用于存储HTML文档中的元素。在某些情况下,我们需要检查HTMLCollection中是否包含具有给定类名的元素。以下是一个解决此问题的方法:
首先,我们需要在HTML文档中定义一个包含具有不同类名的li元素的ul列表。然后,我们可以使用JavaScript编写一个函数来检查HTMLCollection中是否存在具有给定类名的元素。
在这个例子中,我们定义了一个名为"find"的函数,它接受一个类名作为参数。函数内部,我们使用document.getElementsByClassName
方法获取具有类名"test"的元素的HTMLCollection。然后,我们将HTMLCollection转换为数组,并使用循环遍历数组中的每个元素。对于每个元素,我们使用indexOf
方法检查其类名是否包含给定的类名。如果包含,我们返回true(或者如果想返回元素本身,可以注释掉此行代码并返回元素)。如果循环结束后仍未找到匹配的元素,我们返回false(或者如果想返回null,可以注释掉此行代码并返回null)。
最后,我们在控制台中使用console.log
方法调用"find"函数并传入类名"selected"作为参数,以验证函数是否按预期工作。
在这段代码中,出现了一个奇怪的错误,提示"indexOf is not a function"。为了解决这个问题,可以使用[].slice.call(elements)
将HTMLCollection转换为数组。这样,我们就可以使用数组的方法,如indexOf。
此外,还有一些其他的评论和问题,但与解决问题的方法无关。
通过以上的整理,我们可以得出以下结论:通过JavaScript,我们可以检查HTMLCollection中是否包含具有给定类名的元素。我们可以使用document.getElementsByClassName
方法获取HTMLCollection,并将其转换为数组,然后使用数组的方法来检查元素的类名。
在JavaScript中,如何检查HTMLCollection是否包含具有给定类名的元素?
问题的原因是,HTMLCollection是子节点的集合,并不是简单的数组。因此,我们需要查看的是Array.from(NodeList)。
假设我们要找到在子节点中是否存在一个元素div.someclassname.highlight(测试类名为someclassname和highlight)。
解决方法如下:
let childrenNodeArr = Array.from(some_obj.children); /*或者使用扩展运算符[...some_obj.children]*/ /*每个元素都是一个DOM节点,我们可以运行classList.contains*/ const elemFound = childrenNodeArr.find( e => e.classList.contains("someclassname") && e.classList.contains("highlight") ); if (elemFound) { /*是一个div.someclassname.highlight*/ }
注意:上述测试对于任何具有类名someclassname和highlight的DOM元素都会通过,而不仅仅是div元素。Element.classList.contains Array.from Array.find
注意:Array.from在IE和旧版本浏览器中不起作用。请参见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility。
是的,我知道+1。IE可能是唯一的限制。其他浏览器的支持基本上已经到位,除非有人使用非常旧的版本。例如:Chrome 45于2015年发布。
感谢您的答案。由于我希望它支持所有浏览器,我接受了另一个答案。但这个方法也有效 🙂