概述要首先执行某个任务，我们需要通过其类或 id 来访问该特定元素，因此在访问该元素之前，我们检查该类是否存在于该特定元素中。 classlist 对象包含 javscript 中的内置方法 classlist.contains()。此方法确定给定元素是否属于指定类。整个过程将会发生，因为首先我们必须通过 getelementbyid()、getelementsbyclassname() 或任何其他方法访问该元素。访问它后，我们必须使用 classlist.contains() 方法检查该类。
语法这个问题使用的语法是 -
classlist.contains(classname);
classlist - 这是 javascript 中的一个对象，它接收特定元素中包含的类的数组。
contains - 这是 classlist 对象的一个方法，它检查指定的类是否存在于给定元素中。
classname - 这是我们必须在给定元素中搜索的指定名称。
算法步骤 1 - 在 body 标记内创建一些 html 元素。为每个元素指定一些类。
步骤 2 - 在 html 按钮中指定 onclick() 事件方法。
第 3 步 - 创建 javascript 箭头函数。访问任何 html 并将其存储在变量中。
步骤 4 - 使用 classlist 对象的 contains() 方法。将变量作为参数传递到 contains() 方法中。
步骤 5 - 如果返回 true，则 html 元素中存在特定类，否则如果返回 false，则元素中不存在特定类。
示例1：当元素包含指定类时我们在 body 标签中使用了“”标签，其中包含类名：class =“my-para first lorems”，所以这些是类名。我们的任务是检查元素以查看它是否包含指定的元素。为此，我们使用了 contains() 方法，它是 classlist 对象的方法。因此，我们要检查的类作为参数传递到“contains()”方法中，该方法检查类的确定性。
<!doctype html><html lang=en><head> <title>check for specified class in a given element</title> <style> body{ background-color: #0a0a0a; color: white; } </style></head> <body> <p id=para class=my-para first lorems>i am para with certain classes, check now.</p> <button onclick=check() style=margin-bottom: 8px;>check now</button><br> <div id=output style=display: inline-block; padding: 0.3rem;></div> <script> check = () => { var ptag = document.getelementbyid(para); var cl = ptag.classlist; var clcontain = cl.contains(my-para); if (clcontain) { document.getelementbyid(output).innerhtml += element contains specified class; document.getelementbyid(output).style.background = green; document.getelementbyid(output).style.color = white; } else { document.getelementbyid(output).innerhtml += element does not contains the specified class; document.getelementbyid(output).style.background = tomato; document.getelementbyid(output).style.color = white; } } </script> </body></html>
上述示例的输出，因为“elements contains specified class”的输出为 true。
示例2：当元素不包含指定类时下图显示“element 不包含指定的类”，这意味着当检查 classlist.contains() 时，它一定返回了 false。因此错误条件已终止。
<!doctype html><html lang=en><head> <title>check for pecified class in a given element</title> <style> body{ background-color: #0a0a0a; color: white; } </style></head> <body> <p id=para class=my-para first lorems>i am para with certain classes, check now.</p> <button onclick=check() style=margin-bottom: 8px;>check now</button><br> <div id=output style=display: inline-block; padding: 0.3rem;></div> <script> check = () => { var ptag = document.getelementbyid(para); var cl = ptag.classlist; var clcontain = cl.contains(mypara); if (clcontain) { document.getelementbyid(output).innerhtml += element contains specified class; document.getelementbyid(output).style.background = green; document.getelementbyid(output).style.color = white; } else { document.getelementbyid(output).innerhtml += element does not contains the specified class; document.getelementbyid(output).style.background = tomato; document.getelementbyid(output).style.color = white; } } </script> </body></html>
结论
classlist的返回类型是domtokenlist，它是一个数组类型。它包含该特定元素中存在的类的列表。可以通过使用任何 for 循环或映射对其进行迭代来查看 domtokenlist。
var ptag = document.getelementbyid(para).classlist;ptag.foreach(element => { console.log(element);});
“contains()”方法返回布尔类型的结果，为 true 或 false。 classlist 对象包含类的数组。因此，当 contains() 方法检查指定的类时，它会检查 domtokenlist，并代表它做出决定并返回 true 或 false。
以上就是如何在 javascript 中检查给定元素是否具有指定的类？的详细内容。