javascript判断元素存在和判断元素存在于实时的dom中的方法
今天（周六）下午我在公司加班时不知道要干什么，就打开公司的一个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?
4，How to get a DOM Element from a JQuery Selector
6，baseURI
PS：感觉写博客比写代码累多了，自己写点儿东西，以防自己忘记。
javascript判断元素存在和判断元素存在于实时的dom中的方法的更多相关文章
- HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://codepen.io/pen/ <elem ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- JavaScript判断数组是否包含指定元素的方法
本文实例讲述了JavaScript判断数组是否包含指定元素的方法.分享给大家供大家参考.具体如下: 这段代码通过prototype定义了数组方法,这样就可以在任意数组调用contains方法 /** ...
- mybatis判断集合为空或者元素个数为零
mybatis判断集合为空或者元素个数为零: <if test="mlhs != null and mlhs.size() != 0"> and t.mlh_name ...
- 小程序：怎么在两层列表循环（wx:for）的时候判断是否为最后一个元素
问题说明: 如下图所示,在箭头所指的最后一个选项的底线与底部操作栏的上边线重叠,需要清除掉最后一个元素的底线: 想到的解决方案: 通过判断是否为最后一个元素,然后通过条件渲染(wx:if)动态添加对 ...
- JS判断数组是否包含某元素
我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理. 1.for循环结合break 可能很多人第一会想到for ...
- DOM基础+domReady+元素节点类型判断
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 ...
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- 初探JavaScript（一）——也谈元素节点、属性节点、文本节点
Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...
随机推荐
- android 从服务器获取新闻数据并显示在客户端
新闻客户端案例 第一次进入新闻客户端需要请求服务器获取新闻数据,做listview的展示, 为了第二次再次打开新闻客户端时能快速显示新闻,需要将数据缓存到数据库中,下次打开可以直接去数据库中获取新闻直 ...
- Xcode插件管理工具Alcatraz
1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具.它可以直接集成在Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 2.安装和删除 使用如下的终端来安 ...
- table布局， td内部元素溢出边界问题。 （已解决）
今天,我尝试用table布局有多个输入需要提交的页面, 为了使输入元素占满td,我对其宽度设置为100%, 结果text输入元素溢出td, 具体情况如下: 解决办法是对td样式设置为overflow: ...
- Palm是一家英國智能手機公司
據TCL方面介紹,本次收購只涉及品牌,不會涉及員工和其他資產.被收購之後,Palm仍將繼續把總部設於美國加州矽谷,以發揮該區域所獨有的先進技術和人才的優勢. TCL通訊CEO郭愛平表示TCL將把Pal ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 有了lisk,为什么我们还要做一个Asch?
0 前言 首先要声明一点,我们和我们的一些朋友都是lisk的投资人和支持者,我们也相信lisk会成功. 事实上,lisk已经成功了一半,目前在区块链领域融资金额排行第二,仅次于以太坊. 那为什么我们还 ...
- Second Day: 关于Button监听事件的三种方法（匿名类、外部类、继承接口）
第一种:通过匿名类实现对Button事件的监听 首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickLis ...
- .NET面试题系列[12] - C# 3.0 LINQ的准备工作
"为了使LINQ能够正常工作,代码必须简化到它要求的程度." - Jon Skeet 为了提高园子中诸位兄弟的英语水平,我将重要的术语后面配备了对应的英文. .NET面试题系列目录 ...
- 如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...
- Vue2.0实现1.0的搜索过滤器功能
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <bod ...