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

更新時間：2017年01月17日 10:49:53 作者：yangtoude

本文主要介紹了javascript判斷元素存在和判斷元素存在于實時的dom中的方法。具有一定的參考價值，下面跟著小編一起來看下吧

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

打開網(wǎng)站首頁，我習(xí)慣性的打開了chrome的調(diào)試工具，然后鼠標(biāo)開始滾動頁面，然后問題就出來了：頁面無法向下滾動，調(diào)試工具的console里報了好多undefined的錯誤。

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

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

這段代碼的想要做的就是，判斷下頁面是否有某個id標(biāo)識的元素，如果有就做一些事情。網(wǎng)站首頁是應(yīng)該沒有這個元素的，不應(yīng)該執(zhí)行這個代碼。

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

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

其實$('selector')返回的永遠都是一個jQuery Object，不管它找沒找到元素。(關(guān)于這個返回值的問題請參考：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上發(fā)現(xiàn)了這個問答：How to check if element exists in the visible DOM? 問題是，如何檢查元素是否存在于可見（當(dāng)前實時）的dom中。

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

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

具體用法可以這么寫:

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

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

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

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

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

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

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

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

<!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函數(shù)，它是用來判斷元素是否存在的，這個方法其實是依據(jù)元素的id是否為null來判斷，思路好像和用baseURI來判斷是相同的。我試了下，當(dāng)元素存在時返回true，

但當(dāng)元素不存在時，它會報undefined錯誤，感興趣的同學(xué)可以研究下。

總結(jié)：

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

但如果想判斷一個元素是否在當(dāng)前實時可見的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/