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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
jquery插件懒加载的示例
Oct 24 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
Python字符串切片操作知识详解
2016/03/28 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python模块导入的细节详解
2018/12/10 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
业务代表的岗位职责
2013/11/16 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
会计工作心得体会
2014/01/13 职场文书
家长会主持词
2014/03/26 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
机动车登记业务委托书
2014/10/08 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技