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

2024-03-19

如何在不使用getElementById method?

我已经设置了一个现场演示 http://jsbin.com/apawi5/3以供参考。我还将在这里打印代码:

<!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 中删除,该变量仍会保留该元素首次声明时的状态。换句话说,它不是对元素本身的实时引用,而是一个副本。因此,检查变量的值(元素)是否存在将提供意外的结果。

The isNull函数是我尝试检查变量中元素是否存在,并且它有效,但我想知道是否有更简单的方法来完成相同的结果。

PS:如果有人知道一些与该主题相关的好文章,我也对为什么 JavaScript 变量的行为如此感兴趣。


似乎有些人登陆这里,只是想知道某个元素是否exists(与原来的问题有点不同)。

这就像使用任何浏览器的选择方法并检查它是否存在一样简单truthy值(一般)。

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

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

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

此外,您还可以使用现有的许多其他方法中的一些来查找元素,例如(全部靠document):

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

其中一些方法返回一个NodeList,所以一定要检查它的length财产,因为一个NodeList是一个对象,因此truthy.


为了实际确定一个元素是否作为可见 DOM 的一部分存在(就像最初提出的问题一样),Csuwldcat 提供了比您自己推出更好的解决方案 https://stackoverflow.com/questions/5629684/how-can-i-check-if-an-element-exists-in-the-visible-dom/16820058#16820058(正如这个答案曾经包含的那样)。也就是说,要使用the contains() https://developer.mozilla.org/en-US/docs/Web/API/Node.containsDOM 元素上的方法。

你可以像这样使用它...

document.body.contains(someReferenceToADomElement);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查可见 DOM 中是否存在元素? 的相关文章

随机推荐