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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
JS/jQuery判断DOM节点是否存在的简单方法
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th
-
javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: if ($('#a')) { // some code ... $('#b').doSomething; // so
-
javascript中html字符串转化为jquery dom对象的方法
原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px
-
JavaScript判断数组是否包含指定元素的方法
本文实例讲述了JavaScript判断数组是否包含指定元素的方法.分享给大家供大家参考.具体如下: 这段代码通过prototype定义了数组方法,这样就可以在任意数组调用contains方法 /** * Array.prototype.[method name] allows you to define/overwrite an objects method * needle is the item you are searching for * this is a special variab
-
JS实现判断数组是否包含某个元素示例
本文实例讲述了JS实现判断数组是否包含某个元素.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> Array.prototype.S = String.fromC
-
判断数组是否包含某个元素的js函数实现方法
判断数组是否包含某个元素的js函数实现方法 Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } 或 Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (t
-
python实现判断数组是否包含指定元素的方法
本文实例讲述了python实现判断数组是否包含指定元素的方法.分享给大家供大家参考.具体如下: python判断数组是否包含指定的元素的方法,直接使用in即可,python真是简单易懂 print 3 in [1, 2, 3] # membership (1 means true inventory = ["sword", "armor", "shield", "healing potion"] if "healin
-
Python实现变量数值交换及判断数组是否含有某个元素的方法
本文实例讲述了Python实现变量数值交换及判断数组是否含有某个元素的方法.分享给大家供大家参考,具体如下: 本来,这两个问题都属于的编程入门简单得不能再简单的问题,根本就不值得写篇记录来记录的. 一.变量数值交换 先说变量数值交换,从C语言开始,我们就知道要先设置一个临时变量,再把某元素的值覆盖此临时变量,避免临时覆盖等,如果不设置临时变量,还有位运算的交换形式 然而Python中根本就不用这么复杂,如果要交换变量e1,e2彼此的值,就下面一行代码就足矣: e1,e2=e2,e1; 比如,如下
-
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
如下所示: <script type="text/html" id="status"> {{# if(d.status === 1){ }} <span class="layui-badge layui-bg-green">正常</span> {{# } else { }} <span class="layui-badge">禁用</span> {{# } }} &l
-
JS判断数组是否包含某元素实现方法汇总
我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理. 1.for循环结合break 可能很多人第一会想到for循环,毕竟for是最为保险和熟悉的操作: let arr = [1, 2, undefined, '听风是风', 'echo'], i = 0; const LENGTH = arr.length; //初始化result状态,只要能找到匹配的则修改为true let result = false;
-
Javascript封装id、class与元素选择器方法示例
由于各个浏览器都支持的选择方法只有如下三种: 1.document.getElementById() 2.document.getElementsByName() 3.document.getElementsByTagName() 所以在封装选择器的时候要考虑浏览器的兼容性. 示例代码如下: <script>//封装id选择器 function $(selector){ var c=selector.substring(0,1);//获取第一个字符 if(c=="#"){