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 中几个类选择器的简单使用介绍
Mar 14 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP模块memcached使用指南
2014/12/08 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
javascript中this的四种用法
2015/05/11 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python读取YAML文件过程详解
2019/12/30 Python
python中如何使用insert函数
2020/01/09 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
经济学人订阅:The Economist
2018/07/19 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
小学教师事迹材料
2014/01/13 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫