javascript判断元素存在和判断元素存在于实时的dom中的方法 - 行业资讯

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题。

打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的控制台里报了好多未定义的错误。

我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样:

　　　　　　如果($ (' # ')){//一些代码… 　　$ (" # b) .doSomething;//一些代码… 　　} 　　　　

这段代码的想要做的就是,判断下页面是否有某个id标识的元素,如果有就做一些事情。网站首页是应该没有这个元素的,不应该执行这个代码。

好吧,如果你看到这里,你肯定能猜到我不是做前端的。我期望它返回一个布尔类型的假,但它实际上返回的是一个jQuery对象,

注意这里获得的不是dom元素,如果想获得真实的dom元素,可以这么写或者

其实$(“选择器”)返回的永远都是一个jQuery对象,不管它找没找到元素。(关于这个返回值的问题请参考:什么jQuery实际上返回# 63美元;和如何获得一个DOM元素从一个JQuery选择器)。

那么我该如何判断id=的元素是否存在呢?其实可以这么做,如果没有#一个则返回的对象其实是个空对象,可以达到目的。

getElementById (a)可以吗,它返回的是元素对象的一个参考(对象类型)或者是零(. getElementById()),可以用来判断。

到此,我的问题就解决了,也就没有这篇文章了。

但我闲着没事又谷歌了一把,然后我就在stackoverflow上发现了这个问答:如何检查dom # 63;如果元素存在于可见,问题是,.

这个问答里提到了好多方法,除了上面两个提到的方法,其他的比如getElementsByClassName, getElementsByName, querySelector等等,总之这些方法思路基本和上面的两个是相同的,就是简单的检查元素是否存在。

对于题主的提问,有人提供了以下两个比较有意思的方法,其中一个是:document.body.contains(元素),这里面用到了,它可以判断othernode是不是节点的后代,并返回一个布尔值。

具体用法可以这么写:

　　　　//先获取要判断的元素节点　　const阳极=. getelementbyid (' a ');//然后判断该元素节点是不是当前文档页面身体节点的后代　　如果(aNode.ownerDocument.body.contains(阳极)){//做某事　　} 　　之前　　　　

其实,用这个方法可以写一个通用的函数来判断某个元素节点是否在某个页面上,大家可以参考下Mozilla开发人员网络官网javascript手册上的代码:

　　　　　　函数isInPage(节点){ 　　返回(节点===document.body) & # 63;假:document.body.contains(节点); 　　} 　　　　

上面代码中aNode.ownerDocument是个只读属性,它返回阳极所在页面的顶级文档对象文档。

另外有人还提到了这个方法:判断元素节点的是否存在。

baseURI是个只读属性,node.baseURI返回节点节点的绝对的基url准地址(我把它理解为页面的绝对url地址),比如美元(“#”)[0].baseURI,

我在chrome下试了下,#一元素存在的话就会返回一个url字符串,不存在的话报未定义的错误(#不存在自然会报这个错误),感觉这个方法在实际应用中不太好操作,要抛出和捕捉错误,感兴趣的同学可以研究下。

如何检查是否存在可见的dom元素# 63;这个问答的发起者自己写了个方法,我把代码贴到下面:

　　　　　　& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt; script> 　　var getRandomID=function(大小){ 　　var str=" ", 　　我=0, 　　识字课=?123456789 abcdefghijklmnopqurstuvwxyzabcdefghijklmnopqurstuvwxyz”; 　　虽然(我& lt;大小){ 　　str +=chars.substr (Math.floor (math . random () * 62), 1); 　　我+ +; 　　} 　　返回str; 　　}, 　　isNull=function(元素){ 　　var randomID=getRandomID (12), 　　savedID=(element.id) & # 63;元素。id:空; 　　元素。id=randomID; 　　var foundElm=. getelementbyid (randomID); 　　element.removeAttribute (“id”); 　　如果(savedID !==null) { 　　元素。id=savedID; 　　} 　　返回(foundElm) & # 63;假:真; 　　}; 　　窗口。onload=function () { 　　var图像=. getelementbyid(“演示”); 　　控制台。日志(“定义”,(typeof图片===ㄒ濉?& # 63;真:假);//错误　　控制台。日志(‘零’,(图片===null) & # 63;真:假);//错误　　控制台。日志(find-by-id, isNull(图片);//错误　　image.parentNode.removeChild(图片); 　　控制台。日志(“定义”,(typeof图片===ㄒ濉?& # 63;真:假);//错误~应该是真正的# 63; 　　控制台。日志(‘零’,(图片===null) & # 63;真:假);//错误~应该是真正的# 63; 　　控制台。日志(find-by-id, isNull(图片);//真实~正确但是必须有一个更好的方法比想象的# 63; 　　}; 　　& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=把菔尽弊４? lt;/div> 　　& lt;/body> 　　& lt;/html>