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

2019-11-19 17:54:35

字體：大中小

供稿：網(wǎng)友

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

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

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

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

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

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

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

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

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

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

到此，我的問(wèn)題就解決了，也就沒(méi)有這篇文章了。

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

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

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

具體用法可以這么寫(xiě):

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

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

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

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

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

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

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

How to check if element exists in the visible DOM?這個(gè)問(wèn)答的發(fā)起者自己寫(xiě)了個(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ù)，它是用來(lái)判斷元素是否存在的，這個(gè)方法其實(shí)是依據(jù)元素的id是否為null來(lái)判斷，思路好像和用baseURI來(lái)判斷是相同的。我試了下，當(dāng)元素存在時(shí)返回true，

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

總結(jié)：

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

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