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分页脚本
May 21 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php实现将Session写入数据库
2015/07/26 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
社区食品安全实施方案
2014/03/28 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
元旦主持词开场白
2015/05/29 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis