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 相关文章推荐
在JavaScript中typeof的用途介绍
Apr 11 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python+微信接口实现运维报警
2016/08/27 Python
python fabric实现远程部署
2017/01/05 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
flask中过滤器的使用详解
2018/08/01 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
管理科学大学生求职信
2013/11/13 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
国家助学金获奖感言
2014/01/31 职场文书
中专自我鉴定
2014/02/05 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
宣传口号大全
2014/06/16 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
飞屋环游记观后感
2015/06/08 职场文书
运动会跳远广播稿
2015/08/19 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书