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读取中文COOKIE的解决办法
Feb 15 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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调用三种数据库的方法(1)
2006/10/09 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
js的对象与函数详解
2019/01/21 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Python实现建立SSH连接的方法
2015/06/03 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
优秀广告词大全
2014/03/19 职场文书
记账会计岗位职责
2014/06/16 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年班组长工作总结
2015/04/10 职场文书
交心谈心活动总结
2015/05/11 职场文书
暑期工社会实践报告
2015/07/13 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL