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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jquery常用操作小结
Jul 21 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
javascript中数组方法汇总
Jul 07 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP mkdir()定义和用法
2009/01/14 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
一些mootools的学习资源
2010/02/07 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
JavaScript中set与get方法用法示例
2018/08/15 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Django工程的分层结构详解
2019/07/18 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
试用期员工考核制度
2014/01/22 职场文书
小学语文教研活动总结
2014/07/01 职场文书
股东授权委托书范本
2014/09/13 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript