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 css styleFloat和cssFloat
Mar 15 Javascript
浅说js变量
May 25 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JavaScript类的写法
Sep 17 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
JS快速实现简单计算器
Apr 08 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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 强制下载文件代码
2010/10/24 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
原生js实现轮播图
2017/02/27 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
浅析从vue源码看观察者模式
2018/01/29 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
用Python解决计数原理问题的方法
2016/08/04 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
浅谈Python 参数与变量
2020/06/20 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
公司投资建议书
2014/05/16 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Python中time与datetime模块使用方法详解
2022/03/31 Python