我如何检查一个元素是否存在于可见的DOM?

如何在不使用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变量为什么会这样表现感兴趣。

当前回答

我喜欢这种方法:

var elem = document.getElementById('elementID');

if (elem)
    do this
else
    do that

Also

var elem = ((document.getElementById('elemID')) ? true:false);

if (elem)
    do this
else
    do that

2014-08-14 19:58:39

其他回答

csuwldcat的解决方案似乎是最好的，但需要做一些轻微的修改，以使它能够正确地处理与JavaScript代码运行在不同文档中的元素，例如iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

注意元素的ownerDocument属性的使用，而不是简单的旧文档(可能引用也可能不引用元素的所有者文档)。

torazaburo发布了一个更简单的方法，它也适用于非本地元素，但不幸的是，它使用了baseURI属性，这个属性目前还没有在所有浏览器中统一实现(我只能让它在基于webkit的浏览器中工作)。我找不到任何其他可以以类似方式使用的元素或节点属性，所以我认为目前上述解决方案是最好的。

2014-11-29 01:24:03

// This will work prefectly in all :D
function basedInDocument(el) {

    // This function is used for checking if this element in the real DOM
    while (el.parentElement != null) {
        if (el.parentElement == document.body) {
            return true;
        }
        el = el.parentElement; // For checking the parent of.
    } // If the loop breaks, it will return false, meaning
      // the element is not in the real DOM.

    return false;
}

2019-08-14 09:15:03

使用下面的命令返回元素是否存在于DOM中:

return !!document.getElementById('myElement');

2020-08-10 21:16:20

jQuery的解决方案:

if ($('#elementId').length) {
    // element exists, do something...
}

这为我使用jQuery工作，不需要$('#elementId')[0]被使用。

2012-12-06 09:10:29

您可以检查parentNode属性是否为空。

也就是说,

if(!myElement.parentNode)
{
    // The node is NOT in the DOM
}
else
{
    // The element is in the DOM
}

2012-02-29 14:32:20

我如何检查一个元素是否存在于可见的DOM?

推荐文章

最新文章

标签