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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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图片的二进制转换实现方法
2014/12/15 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php实例化一个类的具体方法
2019/09/19 PHP
Javascript 面试题随笔
2011/03/31 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
js实现图片360度旋转
2017/01/22 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
2015年调度员工作总结
2015/04/30 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
python分分钟绘制精美地图海报
2022/02/15 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫