資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
