如何在不依賴 getElementById 的情況下驗證可見 DOM 中元素是否存在

如何確定可見DOM 中元素是否存在

您可能會遇到需要驗證元素是否存在而不依賴在getElementById 方法上。本文討論了一種改進的方法，並提供了對 JavaScript 變數行為的見解。

用於元素存在性檢查的自訂函數

如提供的程式碼所示，檢索元素到變數中並不能保證 DOM 的即時引用。要準確檢查是否存在，可以使用 isNull() 等函數。此函數為元素指派一個隨機 ID，使用指派的 ID 檢索它，然後刪除該 ID 以避免副作用。

替代方法

除了此自訂之外函數，還有更直接的選項來檢查元素是否存在：

• 瀏覽器選擇方法： document.getElementById("find-me") 或傳回引用的類似方法等技術可以使用元素或null。對於布爾結果，請申請！
• 其他元素選擇方法：文件提供了多種查找元素的方法，例如 querySelector()、getElementsByClassName() 等。驗證它們的長度屬性，因為某些方法（如 NodeList）即使在為空時也會傳回真值。

可見DOM 檢查

專門檢查元素是否駐留在可見DOM，在DOM 元素上使用contains() 方法：

document.body.contains(someReferenceToADomElement);

此方法提供更精確的存在驗證。

理解 JavaScript 變數行為

為何 JavaScript 變數顯示觀察到的行為，解釋在於變數的本質。考慮以下程式碼：

var myVar = document.getElementById("myElem");

myVar 儲存對元素的引用，而不是對其的即時連接。當元素從 DOM 中刪除時，它在 myVar 中的引用指標不會更新。因此，typeof myVar 仍然是“object”，isNull(myVar) 傳回 false，表明儘管元素已被刪除，但明顯存在。

透過理解這些概念，您可以有效地驗證各種 DOM 場景中的元素是否存在。

以上是如何在不依賴 getElementById 的情況下驗證可見 DOM 中元素是否存在的詳細內容。更多資訊請關注PHP中文網其他相關文章！