javascript判断元素存在和判断元素存在于实时的dom中的方法


Posted in Javascript onJanuary 17, 2017

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题。

打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误。

我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样:

if ($('#a')) {
 // some code ...
 $('#b').doSomething;
 // some code ...
 }

这段代码的想要做的就是,判断下页面是否有某个id标识的元素,如果有就做一些事情。网站首页是应该没有这个元素的,不应该执行这个代码。

好吧,如果你看到这里,你肯定能猜到我不是做前端的。我期望它返回一个布尔类型的false,但它实际上返回的是一个jQuery Object,

注意这里获得的不是dom element,如果想获得真实的dom element,可以这么写$('#a')[0]或者$('#a').get(0)。

其实$('selector')返回的永远都是一个jQuery Object,不管它找没找到元素。(关于这个返回值的问题请参考:What does jquery $ actually return? 和 How to get a DOM Element from a JQuery Selector)。

那么我该如何判断id=a的元素是否存在呢?其实可以这么做,if ($('#a').length),如果没有#a则返回的object其实是个空对象,可以达到目的。

getElementById('a')可以吗,它返回的是Element object的一个参考(object类型)或者是null(document.getElementById()),可以用来判断。

到此,我的问题就解决了,也就没有这篇文章了。

但我闲着没事又google了一把,然后我就在stackoverflow上发现了这个问答:How to check if element exists in the visible DOM?  问题是,如何检查元素是否存在于可见(当前实时)的dom中

这个问答里提到了好多方法,除了上面两个提到的方法,其他的比如getElementsByClassName、getElementsByName、querySelector等等,总之这些方法思路基本和上面的两个是相同的,就是简单的检查元素是否存在。

对于题主的提问,有人提供了以下两个比较有意思的方法,其中一个是:document.body.contains(element),这里面用到了node.contains(othernode)方法,它可以判断othernode是不是node的后代,并返回一个布尔值。

具体用法可以这么写:

// 先获取要判断的元素节点
const aNode = document.getElementById('a');
// 然后判断该元素节点是不是当前文档页面body节点的后代
if (aNode.ownerDocument.body.contains(aNode)) {
 // do something
}

其实,用这个方法可以写一个通用的函数来判断某个元素节点是否在某个页面上,大家可以参考下Mozilla Developer Network官网javascript手册上的代码:

function isInPage(node) {
 return (node === document.body) ? false : document.body.contains(node);
 }

上面代码中aNode.ownerDocument是个只读属性,它返回aNode所在页面的顶级文档对象document。

另外有人还提到了这个方法:判断元素节点的baseURI是否存在。

baseURI是个只读属性,node.baseURI返回node节点的绝对的基准url地址(我把它理解为页面的绝对url地址),比如$('#a')[0].baseURI,

我在chrome下试了下,#a元素存在的话就会返回一个url字符串,不存在的话报undefined错误(#a不存在自然会报这个错误),感觉这个方法在实际应用中不太好操作,要抛出和捕捉错误,感兴趣的同学可以研究下。

How to check if element exists in the visible DOM?这个问答的发起者自己写了个方法,我把代码贴到下面:

<!DOCTYPE html>
<html>
<head>
 <script>
 var getRandomID = function (size) {
   var str = "",
    i = 0,
    chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
   while (i < size) {
    str += chars.substr(Math.floor(Math.random() * 62), 1);
    i++;
   }
   return str;
  },
  isNull = function (element) {
   var randomID = getRandomID(12),
    savedID = (element.id)? element.id : null;
   element.id = randomID;
   var foundElm = document.getElementById(randomID);
   element.removeAttribute('id');
   if (savedID !== null) {
    element.id = savedID;
   }
   return (foundElm) ? false : true;
  };
 window.onload = function () {
  var image = document.getElementById("demo");
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false
  console.log('null', (image === null) ? true : false); // false
  console.log('find-by-id', isNull(image)); // false
  image.parentNode.removeChild(image);
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
  console.log('null', (image === null) ? true : false); // false ~ should be true?
  console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
 };
 </script>
</head>
<body>
 <div id="demo"></div>
</body>
</html>

注意代码中的isNull函数,它是用来判断元素是否存在的,这个方法其实是依据元素的id是否为null来判断,思路好像和用baseURI来判断是相同的。我试了下,当元素存在时返回true,

但当元素不存在时,它会报undefined错误,感兴趣的同学可以研究下。

总结:

其实判断一个元素是否存在,用getElementById()(或其他选择元素的方法)再配合是否为null来判断,或用jQuery获取对象并判断其length,简单又直接。

但如果想判断一个元素是否在当前实时可见的dom中,那就用node.contains(othernode)方法。

参考:

1,How to check if element exists in the visible DOM?

2,What does jquery $ actually return?

2,Node.contains()

3,Node.ownerDocument

4,How to get a DOM Element from a JQuery Selector

5,https://api.jquery.com/get/

6,baseURI

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
JS实现的几个常用算法
Nov 12 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
深入理解javascript中的 “this”
Jan 17 #Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 #Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
生成二维码方法汇总
2014/12/26 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
自我鉴定模板
2013/10/29 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
个人工作主要事迹
2014/05/08 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
初中语文教师研修日志
2015/11/13 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python