JS/jQuery判断DOM节点是否存在的简单方法


Posted in Javascript onNovember 24, 2016

JS原生判断DOM节点是否存在页面中

JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象。既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中

代码:

Object.prototype.exist = function(){ 
 if(typeof this !='undefined' && this.length>=1){
  return true;
 }
 
 return false;
};

使用:

假设页面有如下节点

<div>这里是DIV节点</div>
<div>这里是DIV节点</div>
<span>这里是span节点</span>

判断节点是否在页面:

var is_exist = document.getElementsByTagName('div').exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName('span').exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName('p').exist();
alert(is_exist); // false

注意:如果使用是使用document.getElementById()方法获取对象的就不能使用exist()方法,因为根据ID取节点对象的方法在取不到节点的情况下会返回一个空对象,不会集成原型exist()函数,所以会报错!所以如果是根据ID取对象的可以直接if(obj)这样既可判断DOM节点是否存在页面中

jQuery判断DOM节点是否存在页面中

可以这么干

添加原型:

(function($) {
 $.fn.exist = function(){ 
  if($(this).length>=1){
   return true;
  }
  return false;
 };
})(jQuery);

使用方法:
假如页面有如下DOM节点

<div id="a">这里是id=a节点</div>
<div>这里是DIV节点</div>
<div>这里是DIV节点</div>
<span>这里是span节点</span>

判断:

alert($('#aaa').exist()); // false
alert($('#a').exist()); // true
alert($('div').exist()); // true
alert($('p').exist()); // false

以上两种方法其实都是根据对象集合的length属性判断对象是否存在。

本篇文章就是小编为大家带来的JS/jQuery判断DOM节点是否存在的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 #Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 #Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 #Javascript
纯javascript版日历控件
Nov 24 #Javascript
js通过classname来获取元素的方法
Nov 24 #Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 #Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
You might like
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
pycharm修改file type方式
2019/11/19 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python time()的实例用法
2020/11/03 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
汽车检测与维修个人求职信
2013/09/24 职场文书
应聘教师推荐信
2013/10/31 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
新年爱情寄语
2014/04/08 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
婚内房产协议书范本
2014/10/02 职场文书
Python 语言实现六大查找算法
2021/06/30 Python