快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

具體用法可以這么寫:

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

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

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

上面代碼中aNode.ownerDocument是個(gè)只讀屬性，它返回aNode所在頁面的頂級(jí)文檔對(duì)象document。

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

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

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

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

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

但當(dāng)元素不存在時(shí)，它會(huì)報(bào)undefined錯(cuò)誤，感興趣的同學(xué)可以研究下。

總結(jié)：

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

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