如何在不使用getElementById
方法的情况下测试元素是否存在?
我已经设置了一个live demo供参考。我也将在此处打印代码:
<!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>
[基本上,以上代码演示了将元素存储到变量中然后从DOM中删除的元素。即使该元素已从DOM中删除,该变量仍保留该元素的原定义。换句话说,它不是对元素本身的实时引用,而是副本。结果,检查变量的值(元素)是否存在将提供意外的结果。
isNull
函数是我尝试从变量中检查元素是否存在,并且可以正常工作,但是我想知道是否有更简单的方法来实现相同的结果。
PS:如果有人知道一些与该主题相关的好文章,我也对JavaScript变量为何如此表现感兴趣。
似乎有些人在这里着陆,只是想知道元素exists(与原始问题有些不同)。
这很简单,就像使用浏览器的任何选择方法,并检查它的truthy值(通常)一样。
例如,如果我的元素的id
为"find-me"
,我可以简单地使用...
var elementExists = document.getElementById("find-me");
此对象将返回对元素的引用或null
。如果必须具有布尔值,则只需在方法调用之前抛一个!!
。
此外,您可以使用许多其他方法来查找元素,例如(全部以document
为准:]]]
querySelector()
/ querySelectorAll()
getElementsByClassName()
getElementsByName()
其中一些方法返回NodeList
,因此请确保检查其length
属性,因为NodeList
是对象,因此truthy
用于实际确定元素是否作为可见DOM的一部分存在(例如最初询问的问题),Csuwldcat provides a better solution than rolling your own(此答案曾经包含)。也就是说,要对DOM元素使用contains()
方法。
您可以像这样使用它...
contains()
代替迭代父母,当元素与dom分离时,您可以获得边界全为零的rect矩形
检查元素是否存在的简单方法可以通过jQuery的单行代码完成。
另一个选项element.closest:
使用jQuery的简单解决方案
您还可以使用jQuery.contains
,它检查一个元素是否是另一个元素的后代。我传入jQuery.contains
作为要搜索的父元素,因为页面DOM上存在的任何元素都是document
的后代。
通过jQuery.contains( document, YOUR_ELEMENT)
检查元素是否为<html>
的子级:
const div = document.createElement('div');
document.documentElement.contains(div); //-> false
document.body.appendChild(div);
document.documentElement.contains(div); //-> true
我喜欢这种方法
使用此:
将var elem = ((document.getElementById('elemID')) ? true:false);
if( elem ) do this
else
do that
与var isInDOM = function(element, inBody) {
var _ = element, last;
while (_) {
last = _;
if (inBody && last === document.body) { break;}
_ = _.parentNode;
}
return inBody ? last === document.body : last === document;
};
一起使用:
为什么可以使用document.body.contains(someReferenceToADomElement);
?
尝试一下,这是最可靠的解决方案:
除HTML元素外,所有现有元素均已设置parentElement!
此代码对我有用,并且没有问题。
使用var element = document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
// exists.
}
,您可以很容易地检查页面(当前在DOM中)是否存在任何元素:
我只是做:
来自if(document.getElementById("myElementId")){
alert("Element exists");
} else {
alert("Element does not exist");
}
您可以检查一下parentNode属性是否为空吗?
最简单的解决方案是检查if(!myElement.parentNode)
{
//node is NOT on the dom
}
else
{
//element is on the dom
}
属性,该属性仅在元素插入DOM中时设置,并在删除元素时恢复为空字符串。
jQuery解决方案:
$('#elementId')[0]
似乎是最好的,但是需要稍作修改以使其与运行javascript的文档不在同一文档中的元素(例如iframe)正常工作。