数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery/JavaScript 检查两个元素是否相同？
我们可以使用原生 JavaScript 或 jQuery（JavaScript 的一个特色库）中的各种方法访问 HTML 元素。
有时，在访问 DOM 元素后，开发人员可能需要检查两个访问的元素是否相同。在本教程中，我们将学习如何使用 JavaScript 的严格相等运算符和 jQuery 的一种方法来检查两个 HTML 元素的相等性。
使用 JavaScript 中的相等运算符 (==)
我们可以通过getElementById、querySelector、getElementByClassName等方法访问 HTML 元素。之后，我们可以将其存储在 JavaScript 变量中，并可以使用相等运算符比较这些变量以检查两个元素的相等性，就像我们用来比较两个数字或字符串值一样。
语法
用户可以按照以下语法比较两个 HTML 元素。
if (element1 == element2) {
// elements are the same
} else {
// elements are not the same
}
在上述语法中，element1 和 element2 是使用 JavaScript 从 DOM 访问的 HTML 元素。
示例
在这个例子中，我们创建了<h3> HTML 元素，并添加了值为“test”的 id 属性。之后，我们使用 document.getElementById() 方法通过 id 访问该 <h3> 元素。element1 和 element2 变量包含相同的元素。
之后，我们使用相等运算符来比较它们，用户可以看到输出结果。
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
<h4 id = "test"> This is a sample element!</h4>
<p id = "output"></p>
<script>
let output = document.getElementById("output");
let element1 = document.getElementById("test");
let element2 = document.getElementById("test");
if (element1 == element2) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
示例
在这个例子中，我们使用<h3>标签创建了元素。接下来，我们使用 document.getElementByTagName() 方法按标签名称访问 HTML 元素。它返回所有带有<h3>标签的 HTML 元素的数组。
之后，我们比较了 elements 数组中第 0 个和第 1 个索引的值，用户可以在输出中看到它们是不同的。
<html>
<body>
<h3>Using the <i>Equality operator</i> to check if two HTML elements are the same or not.</h3>
<h4>This is a element1!</h4>
<h4>This is a element2!</h4>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let elements = document.getElementsByTagName("h3");
if (elements[0] == elements[1]) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
使用 jQuery 的 is() 方法
jQuery 包含各种操作 DOM 元素的方法。is() 方法将一个元素作为参数，另一个作为参考，并比较这两个元素。
此外，用户需要在使用 is() 方法之前使用“$”符号在 jQuery 中访问元素。
语法
用户可以按照以下语法使用 is() 方法来检查两个 HTML 元素是否相等。
let isEqual = $("#btn1").is($("#btn2"));
在上述语法中，我们通过它们的 id 访问了“btn1”和“btn2”元素。
示例
在这个例子中，我们添加了 jQuery CDN 以将 jQuery 与我们的 HTML 代码一起使用。我们还创建了两个具有不同 ID 的按钮。
在 JavaScript 中，我们使用了 is() 方法，将 id 为“btn2”的元素作为参数传递，并将 id 为“btn1”的元素作为参考。is() 方法比较这两个元素并返回布尔值，我们已将其存储在 isEqual 变量中。
<html>
<head>
<script
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer">
</script>
</head>
<body>
<h3> Using the <i>is() method of JQuery</i> to check if two HTML elements are same or not.</h3>
<button id = "btn1">Button 1 </button>
<button id = "btn2"> Button 2 </button>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let isEqual = $("#btn1").is($("#btn2"));
if (isEqual) {
output.innerHTML += "The element1 and element2 both are same.";
} else {
output.innerHTML += "The element1 and element2 both are not same!";
}
</script>
</body>
</html>
我们学习了比较两个 HTML 元素的各种方法。用户可以使用纯 JavaScript 或 jQuery 的 is() 方法。此外，用户可以使用不同的方法访问 HTML 元素并进行比较。
2K+ 次浏览
