javascript判断元素存在和判断元素存在于实时的dom中的方法
来源:互联网 发布:网络电视遥控器失灵 编辑:程序博客网 时间:2024/06/05 17:42
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题。
打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误。
我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样:
1 if ($('#a')) {2 // some code ...3 $('#b').doSomething;4 // some code ...5 }
这段代码的想要做的就是,判断下页面是否有某个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的后代,并返回一个布尔值。
具体用法可以这么写:
1 // 先获取要判断的元素节点2 const aNode = document.getElementById('a');3 4 // 然后判断该元素节点是不是当前文档页面body节点的后代5 if (aNode.ownerDocument.body.contains(aNode)) {6 // do something7 }
其实,用这个方法可以写一个通用的函数来判断某个元素节点是否在某个页面上,大家可以参考下Mozilla Developer Network官网javascript手册上的代码:
上面代码中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?这个问答的发起者自己写了个方法,我把代码贴到下面:
注意代码中的isNull函数,它是用来判断元素是否存在的,这个方法其实是依据元素的id是否为null来判断,思路好像和用baseURI来判断是相同的。我试了下,当元素存在时返回true,
但当元素不存在时,它会报undefined错误,感兴趣的同学可以研究下。
总结:
其实判断一个元素是否存在,用getElementById()(或其他选择元素的方法)再配合是否为null来判断,或用jQuery获取对象并判断其length,简单又直接。
但如果想判断一个元素是否在当前实时可见的dom中,那就用node.contains(othernode)方法。
- javascript判断元素存在和判断元素存在于实时的dom中的方法
- jquery判断元素是否存在的方法
- 判断控件数组中的元素是否存在
- jQuery判断元素是否存在方法
- javascript 判断某元素的id是否存在
- jQuery判断元素是否显示和存在
- jQuery中判断元素是否存在的方法
- jQuery中判断元素是否存在的方法
- 用jQuery判断页面元素是否存在的方法
- 判断JS数组中存在相同的元素方法
- php判断数组元素是否存在某个字符串的方法
- jQuery判断元素是否存在的可靠方法
- jQuery判断元素是否存在的可靠方法
- 用JavaScript判断一个html元素是否存在的几种方法
- 判断某元素是否存在于数组中
- jquery判断元素是否存在
- JQuery判断元素是否存在
- jquery如何判断元素存在
- 第4章 数组和指针的常用方法
- maven项目文件存在却找不到class
- TCP断点续传
- dom4j读取一个xml文件,以原格式输出
- spring-boot入门Demo
- javascript判断元素存在和判断元素存在于实时的dom中的方法
- [DP] POJ1050
- 关于vue 框架与后台框架的混合使用的尝试
- ios 多线程间通信
- 字符串split切割"."
- python实现求解列表中元素的排列和组合问题
- 2017多校联合第四场1011/hdu6181(次短路)
- 简单讲解SQL的注入以及防御
- php小tips