如何使用 jQuery/JavaScript 檢查兩個元素是否相同？
- WBOY轉載
- 2023-08-27 16:13:021157瀏覽
我們可以使用 vanilla JavaScript 或 jQuery（一個 JavaScript 特色庫）中的各種方法來存取 HTML 元素。
有時，在存取 DOM 元素後，開發人員可能需要檢查兩個存取的元素是否相同。在本教程中，我們將學習使用 JavaScript 的嚴格相等運算子和 jQuery 的方法來檢查兩個 HTML 元素的相等性。
在 JavaScript 中使用相等運算子 (==)
我們可以透過getElemenetById、querySelector、getElementByClassName等方法來存取HTML元素。之後，我們可以將其儲存在 JavaScript 變數中，並且可以使用相等運算子比較這些變數以檢查兩個元素的相等性，就像我們使用它來比較兩個數字或字串值一樣。
文法
使用者可以按照以下語法來比較兩個 HTML 元素。
if (element1 == element2) {
// elements are the same
} else {
// elements are not the same
}
在上述語法中，element1 和 element2 是使用 JavaScript 從 DOM 存取的 HTML 元素。
範例
在此範例中，我們建立了
HTML 元素並新增了帶有「test」值的 id 屬性。之後，我們使用 document.getElementById() 方法透過 id 存取該 元素。 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>
範例
在此範例中，我們使用
標籤建立了元素。接下來，我們使用 document.getElementByTagName() 方法透過標籤名稱存取 HTML 元素。它傳回所有帶有 標籤的 HTML 元素的陣列。
之後，我們比較了 elements 陣列的第 0th 和 1st 索引的值，使用者可以在輸出中看到它們都是不同的。
<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，以便在 HTML 程式碼中使用 jQuery。我們還創建了兩個具有不同 ID 的按鈕。
在 JavaScript 中，我們使用了 is() 方法，將 id 為「btn2」的元素作為參數傳遞，並以 id 為「btn1」的元素作為參考。 is() 方法比較兩個元素並傳回我們儲存在 isEqual 變數中的布林值。
Using the is() method of JQuery to check if two HTML elements are same or not.
<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>
我們學習了比較兩個 HTML 元素的各種方法。使用者可以使用純 JavaScript 或 jQuery 的 is() 方法。此外，使用者可以使用不同的方法來存取 HTML 元素並進行比較。
以上是如何使用 jQuery/JavaScript 檢查兩個元素是否相同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！