如何检查可见 DOM 中是否存在元素？

javascript dom variables element exists

2022-08-29 22:42:43

如何在不使用该方法的情况下测试元素的存在？getElementById

我设置了一个现场演示以供参考。我还将在此处打印代码：

<!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变量表现得这样感兴趣。

答案 1

似乎有些人正在降落在这里，只是想知道是否存在一个元素（与原始问题略有不同）。

这就像使用浏览器的任何选择方法一样简单，并检查它是否具有真实性值（通常）。

例如，如果我的元素有一个，我可以简单地使用...id"find-me"

var elementExists = document.getElementById("find-me");

指定此选项是为了返回对元素的引用或。如果必须具有布尔值，只需在方法调用之前抛出 a 即可。null!!

此外，您可以使用许多其他方法来查找元素，例如（所有方法都以生存为生）：document

querySelector()/querySelectorAll()
getElementsByClassName()
getElementsByName()

其中一些方法返回 a ，因此请务必检查其属性，因为 a 是一个对象，因此是真实的。NodeListlengthNodeList

为了实际确定一个元素是否作为可见DOM的一部分存在（就像最初提出的问题一样），Csuwldcat提供了一个比滚动你自己的解决方案更好的解决方案（因为这个答案曾经包含）。也就是说，在 DOM 元素上使用 contains（） 方法。

你可以这样使用它...

document.body.contains(someReferenceToADomElement);

答案 2

如果可用，请使用。getElementById()

另外，这里有一个简单的方法可以使用jQuery做到这一点：

if ($('#elementId').length > 0) {
  // Exists.
}

如果你不能使用第三方库，那就坚持使用基本的JavaScript：

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // Exists.
}