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

  • Z时代
  • 2024-01-10
  • 分类：问答

不使用该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变量为什么会如此表现，我也很感兴趣。

回答：

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

就像使用浏览器的任何选择方法，然后检查它的 真实 值一样简单（通常）。

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

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

可以指定返回元素或的引用null。如果必须具有布尔值，则只需!!在方法调用之前扔一个。

此外，您可以使用许多其他方法来查找元素，例如（全部靠document）：

  • querySelector()/querySelectorAll()

  • getElementsByClassName()

  • getElementsByName()

其中一些方法返回a NodeList，因此请务必检查其length属性，因为a NodeList是一个对象，因此为 true 。

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

您可以像这样使用它…

document.body.contains(someReferenceToADomElement);

以上是 如何检查可见DOM中是否存在元素？ 的全部内容， 来源链接： utcz.com/qa/412803.html

回到顶部