如何检查可见DOM中是否存在元素？ [英] How can I check if an element exists in the visible DOM?
问题描述
如何在不使用 getElementById 方法的情况下测试元素是否存在？
How do you test an element for existence without the use of the getElementById method?
我已设置制作了实时演示以供参考。我还将在此处也打印代码：
I have set up a live demo for reference. I will also print the code on here as well:
<!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中删除，该变量仍保留该元素的原定义。换句话说，它不是对元素本身的实时引用，而是副本。结果，检查变量值（元素）是否存在将提供意外结果。
Basically the above code demonstrates an element being stored into a variable and then removed from the DOM. Even though the element has been removed from the DOM, the variable retains the element as it was when first declared. In other words, it is not a live reference to the element itself, but rather a replica. As a result, checking the variable's value (the element) for existence will provide an unexpected result.
isNull 函数是我尝试从变量中检查元素是否存在，并且可以，但是我想知道是否有更简单的方法来实现相同的结果。
The isNull function is my attempt to check for an elements existence from a variable, and it works, but I would like to know if there is an easier way to accomplish the same result.
PS：如果有人知道与该主题相关的一些好文章，为什么我的JavaScript变量也会如此表现呢？
PS: I'm also interested in why JavaScript variables behave like this if anyone knows of some good articles related to the subject.
推荐答案
似乎有些人降落在这里，只是想知道元素是否存在（与原始问题略有不同）。
It seems some people are landing here, and simply want to know if an element exists (a little bit different to the original question).
这就像使用浏览器的任何选择方法，然后（通常）检查它的 truthy 值一样简单。
That's as simple as using any of the browser's selecting method, and checking it for a truthy value (generally).
如果我的元素的 id 为找到我 ，我可以简单地使用...
For example, if my element had an id of "find-me", I could simply use...
var elementExists = document.getElementById("find-me");
指定用于返回对元素的引用或 null 。如果必须具有布尔值，只需在方法调用之前抛一个 !! 。
This is specified to either return a reference to the element or null. If you must have a Boolean value, simply toss a !! before the method call.
此外，您可以使用现有的许多其他方法来查找元素，例如（全部依靠文档为生）：
In addition, you can use some of the many other methods that exist for finding elements, such as (all living off document):
-
querySelector（）/querySelectorAll（） -
getElementsByClassName（） -
getElementsByName（）
querySelector()/querySelectorAll()getElementsByClassName()getElementsByName()
其中某些方法返回 NodeList ，因此请务必检查其 length 属性，因为 NodeList 是一个对象，因此是 truthy 。
Some of these methods return a NodeList, so be sure to check its length property, because a NodeList is an object, and therefore truthy.
要真正确定元素是否作为可见DOM的一部分存在（如最初询问的问题），请使用 Csuwldcat提供了比滚动自己的解决方案更好的解决方案（因为这个答案你sed包含）。也就是说，要使用 contains（） DOM元素上的方法。
For actually determining if an element exists as part of the visible DOM (like the question originally asked), Csuwldcat provides a better solution than rolling your own (as this answer used to contain). That is, to use the contains() method on DOM elements.
您可以像这样使用它...
You could use it like so...
document.body.contains(someReferenceToADomElement);
这篇关于如何检查可见DOM中是否存在元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
