原生 JS 和 jQuery 檢查某元素是否存在

本文首發於 lzcBlog，永久連接爲 https://www.lzcapp.cn/archives/557/。推薦轉移到原網址閱讀，體驗更佳。

---

對於動態生成內容的網頁，經常遇到須要判斷元素是否存在的場景。好比說在 lzcCFNode 中，就要使用此功能。

1.原生 JS

1.1.問題描述

對於不存在的對象進行操做，會拋出錯誤。例如

document.getElementById('lzcBlog').innerText('The link of lzcBlog is www.lzcapp.cn');

其中，假如 ID 爲 lzcBlog 的元素不存在，將會拋出一個錯誤：

document.getElementById('lzcBlog') is null, blablabla

1.2.解決方案

解決方案很是簡單，經過判斷該元素是否存在便可。

var lzcBlog = document.getElementById('lzcBlog');
if(lzcBlog)
{
    console.log('ID 爲 lzcBlog 的元素存在於頁面上。');
}
else
{
    console.log('ID 爲 lzcBlog 的元素不存在。');
}

2.jQuery

2.1.問題描述

在 jQuery 中使用一個不存在的元素徹底不會報錯，請放心大膽使用。假如你僅僅是想檢測元素是否存在，那你來對地方了。

2.2.解決方案

jQuery 對象的 length 屬性能夠幫助判斷。當選擇器傳回的不是空元素時，其 length 屬性不爲 0。

var lzcBlog = $('#lzcBlog');
if(lzcBlog.length > 0)
{
    console.log('ID 爲 lzcBlog 的元素存在於頁面上。');
}
else
{
    console.log('ID 爲 lzcBlog 的元素不存在。');
}