如何使用 JavaScript 檢查是否存在具有特定 ID 的元素？

概述

可以使用 JavaScript 檢查 HTML 元素中是否存在特定 ID 以完成特定任務。要解決這個問題，我們應該瞭解如何訪問 HTML 文件物件模型 (DOM)。因此，使用 ID 名稱指定的 HTML 元素可以透過 document 物件訪問，該物件包含多種方法，我們將使用其中 `getElementById()` 方法。

語法

使用的基本語法為：

document.getElementById()

  • document − 在給定的語法中，document 是網頁在瀏覽器中載入時載入的物件。它是一個樹狀結構，從上到下構建。

  • getElementById() − `getElementById()` 是 document 物件的一種方法。此方法有助於訪問包含特定給定 ID 的 HTML 元素。ID 作為引數傳遞給該方法。

解釋

在給定的程式碼中，"id" 由 `document.getElementById()` 方法訪問，其中傳遞了 HTML 元素的 id。HTML 元素儲存在變數 "id" 中，然後我們使用 if-else 條件進行檢查。如果變數為真，即如果它包含特定的 id，則條件終止，否則，else 條件終止。

使用 `document.getElementById()` 時，它的工作原理類似於樹，搜尋樹的每個節點以查詢包含給定特定 id 的節點。在給定的圖中，它將跟蹤所有從 1🡪2🡪3 的路徑。當搜尋節點 3 時，如果在該節點上可以找到給定的特定 id，其中包含 id=“text”，它將返回並將其儲存在變數中。

演算法

  • 步驟 1 - 建立一些 HTML 標籤，例如 label、p 等和一個 HTML 按鈕。

  • 步驟 2 - 使用 DOM 方法 `document.getElementById()` 訪問 HTML 中的任何元素。將其儲存在變數中。

  • 步驟 3 - 使用 `addEvenListener()` 和 `click()` 事件方法。

  • 步驟 4 - 將 HTML 元素的變數作為條件傳遞給 if-else。

  • 步驟 5 - 如果 id 等於 null，則它返回不存在特定 id 元素，否則它將返回 id。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check element with specific id exist or not</title>
   <style>
      body {
         color: white;
         background-color: #0a0a0a;
         display: flex;
         place-content: center;
         min-height: 90vh;
         flex-direction: column;
         text-align: center;
      }
      p {
         width: 50%;
         margin: 8px auto;
         padding: 0.4rem;
      }
      button {
         border: none;
         padding: 0.4rem;
         background-color: #0a0a0a;
         box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
         border-radius: 5px;
         margin: 0 auto;
         color: white;
      }
   </style>
</head>
   <body>
      // The HTML body contains 4 id text, output, chBtn, note
      <label id="text"></label>
      <p id="output"></p>
      <button id="chBtn">Check Now</button>
      <p id="note"></p>
      <script>
         document.getElementById("chBtn").addEventListener("click", () => {
            var id = document.getElementById("text"); //access the HTML element id
         
            // checks whether the id is present in the HTML element or not.
            if (id != null) {
               document.getElementById("output").innerText = "Id exist " + id
               document.getElementById("output").style.background = "green"
               document.getElementById("note").innerText = "*" + id + " is type HTML element"
            } else {
               document.getElementById("output").innerText = "Id does not exist"
               document.getElementById("output").style.background = "tomato"
            }
         })
      </script>
   </body>
</html>

輸出

  • 當 id=“text” 存在於 HTML 元素中時

在給定的輸出中，[HTMLLabelElement] 表示我們已處理檢查的“id”在“HTML 的標籤元素”中可用。

  • 當 id=“tex” 不存在於任何 HTML 元素中時

<label id="text"></label>

結論

`document.getElementById()` 的返回型別為“Object HTMLTagElement”，如果在 DOM 搜尋樹中找不到 id，則返回 null。“id” 的每個 HTML 元素都是唯一的，因此很容易在 HTML 標籤中搜索特定的 id。如果“id”不是唯一的，則 `getElementById()` 方法將返回在 HTML 主體中找到的第一個元素。`document.getElementById()` 與 `addEventListener` 連線，我們可以直接從 JavaScript 執行點選事件，而無需在 `

廣告