JavaScript 中檢查元素是否存在於 DOM

要確認是否有符合條件的元素，請依照識別元素的方式選擇合適的查詢方法。document.getElementById() 會傳回符合條件的元素，或在找不到時傳回 null，因此可檢查結果是否為 truthy 值。類別與標籤查詢則會傳回集合；請檢查集合的 length，因為即使是空集合，它仍然是 truthy 值。

使用 getElementById() 尋找符合條件的單一元素

如果知道元素唯一的 id，就可以使用 getElementById()。找到符合的 ID 時，它會傳回一個 Element；找不到時則傳回 null。傳入 ID 時不需要加上 # 前綴。

以下瀏覽器頁面範例會尋找 ID 為 help-link 的連結：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

exists 變數的型別是 Boolean。Boolean(helpLink) 或 !!helpLink 也會將結果轉換為 true 或 false。如果想明確表達查詢結果的回傳方式，可以使用 !== null 檢查。

查詢符合條件的類別、名稱與標籤

使用 getElementsByClassName() 比對類別，使用 getElementsByName() 比對 name 屬性，並使用 getElementsByTagName() 比對元素標籤。這些方法會查詢不同的屬性：例如，類別值屬於 class，表單控制項的名稱則屬於 name。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName() 和 getElementsByTagName() 會傳回即時的 HTMLCollection 物件。getElementsByName() 則會傳回 NodeList。沒有符合項目的集合，其長度為 0；它仍是物件，而不是 null。請使用 collection.length > 0（或 collection.length !== 0）來檢查是否有符合項目。

了解查詢結果與布林值檢查

查詢單一元素與查詢集合，需要使用不同的存在性檢查方式。對 getElementById() 的結果使用 Boolean(element) 轉換，或將它與 null 比較。若類別、名稱或標籤查詢傳回集合，則應檢查 length。直接對集合使用 !! 無法判斷其中是否有元素：空集合與非空集合都是 truthy 值。

請依照要回答的問題選擇 API：「是否有一個元素的 ID 符合？」或「有多少個元素符合這項條件？」如果之後還需要使用元素，請保留傳回的元素或集合，不要太早將它轉換成布林值。

執行這個範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

此範例獨立示範如何檢查集合長度；上方與 DOM 相關的程式碼片段是瀏覽器頁面的原始碼，並未在此執行。

檢查節點是否位於 document.body 內

document.body.contains(node) 會傳回布林值，指出 node 是否為 body 本身或其後代節點。它檢查的是 DOM 樹狀結構中的包含關係，而不是節點是否顯示在畫面上。節點可能位於 body 中，卻因 CSS 隱藏或其他原因而沒有顯示。

傳入 contains() 的參數必須是單一節點。如果查詢結果是集合，請先選取其中一個項目，並考慮集合可能沒有任何項目。例如，const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); 只會檢查第一個符合條件的節點，不會檢查所有項目。如果你要確認是否有任何符合條件的節點位於 body 中，就必須逐一檢查這些項目。