溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天（周六）下午我在公司加班時不知道要干什么，就打開公司的一個wordpress項目網(wǎng)站，想看下之前自己做的一個網(wǎng)頁是否有問題。
打開網(wǎng)站首頁，我習慣性的打開了chrome的調(diào)試工具，然后鼠標開始滾動頁面，然后問題就出來了：頁面無法向下滾動，調(diào)試工具的console里報了好多undefined的錯誤。
我馬上意識到是我寫的js代碼錯誤的在首頁被執(zhí)行導致的問題，我的代碼大致是這樣：
if ($('#a')) {
// some code ...
$('#b').doSomething;
// some code ...
}
這段代碼的想要做的就是，判斷下頁面是否有某個id標識的元素，如果有就做一些事情。網(wǎ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? 問題是，如何檢查元素是否存在于可見（當前實時）的dom中。
這個問答里提到了好多方法，除了上面兩個提到的方法，其他的比如getElementsByClassName、getElementsByName、querySelector等等，總之這些方法思路基本和上面的兩個是相同的，就是簡單的檢查元素是否存在。
對于題主的提問，有人提供了以下兩個比較有意思的方法，其中一個是：document.body.contains(element)，這里面用到了node.contains(othernode)方法，它可以判斷othernode是不是node的后代，并返回一個布爾值。
具體用法可以這么寫:
// 先獲取要判斷的元素節(jié)點
const aNode = document.getElementById('a');
// 然后判斷該元素節(jié)點是不是當前文檔頁面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é)點的絕對的基準url地址（我把它理解為頁面的絕對url地址），比如$('#a')[0].baseURI，
我在chrome下試了下，#a元素存在的話就會返回一個url字符串，不存在的話報undefined錯誤（#a不存在自然會報這個錯誤），感覺這個方法在實際應用中不太好操作，要拋出和捕捉錯誤，感興趣的同學可以研究下。
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來判斷是相同的。我試了下，當元素存在時返回true，
但當元素不存在時，它會報undefined錯誤，感興趣的同學可以研究下。
總結(jié)：
其實判斷一個元素是否存在，用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/
6，baseURI
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼