javascript判斷元素存在和判斷元素存在于實時的dom中的方法

2024-05-06 16:34:37

字體：大中小

來源：轉載

供稿：網友

今天（周六）下午我在公司加班時不知道要干什么，就打開公司的一個wordpress項目網站，想看下之前自己做的一個網頁是否有問題。

打開網站首頁，我習慣性的打開了chrome的調試工具，然后鼠標開始滾動頁面，然后問題就出來了：頁面無法向下滾動，調試工具的console里報了好多undefined的錯誤。

我馬上意識到是我寫的js代碼錯誤的在首頁被執行導致的問題，我的代碼大致是這樣：

if ($('#a')) { // some code ... $('#b').doSomething; // some code ... }

這段代碼的想要做的就是，判斷下頁面是否有某個id標識的元素，如果有就做一些事情。網站首頁是應該沒有這個元素的，不應該執行這個代碼。

好吧，如果你看到這里，你肯定能猜到我不是做前端的。我期望它返回一個布爾類型的false，但它實際上返回的是一個jQuery Object，

注意這里獲得的不是dom element，如果想獲得真實的dom element，可以這么寫$('#a')[0]或者$('#a').get(0)。

其實$('selector')返回的永遠都是一個jQuery Object，不管它找沒找到元素。(關于這個返回值的問題請參考：What does jquery $ actually return? 和 How to get a DOM Element from a JQuery Selector)。

那么我該如何判斷id=a的元素是否存在呢？其實可以這么做，if ($('#a').length)，如果沒有#a則返回的object其實是個空對象，可以達到目的。

getElementById('a')可以嗎，它返回的是Element object的一個參考（object類型）或者是null（document.getElementById()），可以用來判斷。

到此，我的問題就解決了，也就沒有這篇文章了。

但我閑著沒事又google了一把，然后我就在stackoverflow上發現了這個問答：How to check if element exists in the visible DOM? 問題是，如何檢查元素是否存在于可見（當前實時）的dom中。

這個問答里提到了好多方法，除了上面兩個提到的方法，其他的比如getElementsByClassName、getElementsByName、querySelector等等，總之這些方法思路基本和上面的兩個是相同的，就是簡單的檢查元素是否存在。

對于題主的提問，有人提供了以下兩個比較有意思的方法，其中一個是：document.body.contains(element)，這里面用到了node.contains(othernode)方法，它可以判斷othernode是不是node的后代，并返回一個布爾值。

具體用法可以這么寫:

// 先獲取要判斷的元素節點const aNode = document.getElementById('a');// 然后判斷該元素節點是不是當前文檔頁面body節點的后代if (aNode.ownerDocument.body.contains(aNode)) { // do something}

其實，用這個方法可以寫一個通用的函數來判斷某個元素節點是否在某個頁面上，大家可以參考下Mozilla Developer Network官網javascript手冊上的代碼：

 function isInPage(node) { return (node === document.body) ? false : document.body.contains(node); }

上面代碼中aNode.ownerDocument是個只讀屬性，它返回aNode所在頁面的頂級文檔對象document。

另外有人還提到了這個方法：判斷元素節點的baseURI是否存在。

baseURI是個只讀屬性，node.baseURI返回node節點的絕對的基準url地址（我把它理解為頁面的絕對url地址），比如$('#a')[0].baseURI，

我在chrome下試了下，#a元素存在的話就會返回一個url字符串，不存在的話報undefined錯誤（#a不存在自然會報這個錯誤），感覺這個方法在實際應用中不太好操作，要拋出和捕捉錯誤，感興趣的同學可以研究下。

How to check if element exists in the visible DOM?這個問答的發起者自己寫了個方法，我把代碼貼到下面：

<!DOCTYPE html><html><head> <script> var getRandomID = function (size) {   var str = "",    i = 0,    chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";   while (i < size) {    str += chars.substr(Math.floor(Math.random() * 62), 1);    i++;   }   return str;  },  isNull = function (element) {   var randomID = getRandomID(12),    savedID = (element.id)? element.id : null;   element.id = randomID;   var foundElm = document.getElementById(randomID);   element.removeAttribute('id');   if (savedID !== null) {    element.id = savedID;   }   return (foundElm) ? false : true;  }; window.onload = function () {  var image = document.getElementById("demo");  console.log('undefined', (typeof image === 'undefined') ? true : false); // false  console.log('null', (image === null) ? true : false); // false  console.log('find-by-id', isNull(image)); // false  image.parentNode.removeChild(image);  console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?  console.log('null', (image === null) ? true : false); // false ~ should be true?  console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this? }; </script></head><body> <div id="demo"></div></body></html>

注意代碼中的isNull函數，它是用來判斷元素是否存在的，這個方法其實是依據元素的id是否為null來判斷，思路好像和用baseURI來判斷是相同的。我試了下，當元素存在時返回true，

但當元素不存在時，它會報undefined錯誤，感興趣的同學可以研究下。

總結：

其實判斷一個元素是否存在，用getElementById()(或其他選擇元素的方法)再配合是否為null來判斷，或用jQuery獲取對象并判斷其length，簡單又直接。

但如果想判斷一個元素是否在當前實時可見的dom中，那就用node.contains(othernode)方法。

參考：

1，How to check if element exists in the visible DOM?

2，What does jquery $ actually return?

2，Node.contains()

3，Node.ownerDocument

4，How to get a DOM Element from a JQuery Selector

5，https://api.jquery.com/get/