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应该怎样学
Apr 16 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
js css自定义分页效果
Feb 24 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 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 强制下载文件代码
2010/10/24 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
了解一点js的Eval函数
2012/07/26 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
OpenCV实现人脸识别
2017/04/07 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Java程序员面试90题
2013/10/19 面试题
最热门的自我评价
2013/12/30 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
党员入党表决心的话
2014/03/11 职场文书
购房协议书范本
2014/04/11 职场文书
C++程序员求职信范文
2014/04/14 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
保险公司增员口号
2015/12/25 职场文书
《颐和园》教学反思
2016/02/19 职场文书
初中历史教学反思
2016/02/19 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
python基础之错误和异常处理
2021/10/24 Python