杰晶网络

javascript判断元素存在和判断元素存在于实时的dom中的方法
网络编程 2024/5/19 佚名
3 2

今天（周六）下午我在公司加班时不知道要干什么，就打开公司的一个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"_blank" href="http://stackoverflow.com/questions/1677880/how-to-get-a-dom-element-from-a-jquery-selector">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"color: #ff0000">如何检查元素是否存在于可见（当前实时）的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) "color: #ff0000">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"htmlcode">



<!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)"demo");
  console.log('undefined', (typeof image === 'undefined') "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"_blank" href="http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return">What does jquery $ actually return"_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Node/contains">Node.contains()


3，Node.ownerDocument


4，How to get a DOM Element from a JQuery Selector


5，https://api.jquery.com/get/


6，baseURI


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
判断dom元素是否存在,jquery,判断dom元素
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接