如何使用javascript检查HTMLCollection是否包含具有给定类名的元素?

17 浏览
0 Comments

如何使用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。有人能帮我修复这个问题吗?谢谢。

0
0 Comments

问题的原因是想要检查一个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中是否存在具有指定类名的元素。

0
0 Comments

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,并将其转换为数组,然后使用数组的方法来检查元素的类名。

0
0 Comments

在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年发布。

感谢您的答案。由于我希望它支持所有浏览器,我接受了另一个答案。但这个方法也有效 🙂

0