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

IT技术 javascript dom variables element exists
2021-01-26 02:49:51

如何在不使用该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 变量的行为如此感兴趣。

6个回答

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

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

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

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

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

此外，您可以使用现有的许多其他方法中的一些来查找元素，例如（all living off document）：

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

其中一些方法返回 a NodeList，所以一定要检查它的length属性，因为 aNodeList是一个对象，因此是真实的。

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

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

document.body.contains(someReferenceToADomElement);
更短： var elementInDom = function( el ) { while ( el = el.parentNode ) if ( el === document ) return true; return false; }
2021-03-26 02:49:51
是否有任何理由在下面发布的内容中使用它：document.body.contains()它似乎具有非常好的浏览器支持？
2021-03-30 02:49:51
正是我要找的！这么明显哈哈，我为什么没想到呢。另外，你知道有什么好文章可以解释为什么变量会这样吗？
2021-04-01 02:49:51
@ButtleButkus 阅读实际问题。您使用的解决方案没有意义，因为getElementById() 将返回对 DOM 元素的引用，或者null因此使用typeof（尤其是在 RHS 上）是错误的（如果未定义，则 LHS 条件会抛出ReferenceError）。
2021-04-09 02:49:51
@Jonz 删除了旧的答案部分，不要忘记去投票给csuwldcat
2021-04-11 02:49:51

使用getElementById()如果它是可用的。

此外，这里有一个简单的方法来使用 jQuery：

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

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

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // Exists.
}
我认为这只是常识。
2021-03-20 02:49:51
在第二个代码示例中使用如此复杂的 if 语句有什么好的理由吗？为什么不简单if (element) {}？当元素未定义或为空时，此表达式为假。如果 element 是 DOM 元素，则表达式为真。
2021-03-22 02:49:51
getElementById永远不应该回来undefined。在任何情况下，element != null支票都会接受这一点。
2021-03-24 02:49:51
@kayahr 这太复杂了。getElementById()是只具备以回报null，如果没有找到元素，所以检查的truthy返回的值是所有的需要。
2021-03-29 02:49:51
对于我正在处理的项目，我无法使用库。仅 Good-ol 时尚原始代码。我知道 jQuery 方法，但它不适用于未包装在 jQuery 容器中的元素。例如，$('#elementId')[0].length不会产生相同的结果。
2021-04-01 02:49:51

使用Node.contains DOM API，您可以非常轻松地检查页面中（当前在 DOM 中）是否存在任何元素：

document.body.contains(YOUR_ELEMENT_HERE);

CROSS-BROWSER 注意：documentInternet Explorer 中的对象没有contains()方法 - 为确保跨浏览器兼容性，请document.body.contains()改用。

@LeeSaxon 语法是document.body.contains([selector])，即document.body.contains(document.getElementById('div')
2021-03-20 02:49:51
这确实是最好的答案： - 它是一个网络标准 - 它得到了很好的支持（有点令人惊讶的是它直到版本 9 才出现在 Firefox 中，我猜是因为它是在 IE 中发明的非标准函数标准化直到后来） - 它必须是最快的，因为它使用对本机 API 的单个调用
2021-03-23 02:49:51
@csuwldcat 它对我有用，至少在带有document.contains(document.documentElement). 据我所知，它的原型链上document确实有Node（document-> HTMLDocument-> Document-> Node）
2021-03-25 02:49:51
这是最好的答案。请注意，只需检查document.contains()就足够了。
2021-03-31 02:49:51
这似乎是这个问题的最终答案……而且它的支持，如果要相信 MDN 是相当不错的。
2021-04-09 02:49:51

我只是这样做：

if(document.getElementById("myElementId")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}

它对我有用，而且还没有问题......

这不会检查可见的 DOM。会检查所有的DOM
2021-03-12 02:49:51
此答案效果很好，但仅当元素具有id. 回答问题的更好解决方案如何检查元素是否存在于可见 DOM 中？任何元素，即使id是没有s 的元素也是如此document.body.contains(element)。
2021-03-15 02:49:51
@爱德华这是完全不同的东西 contains()
2021-03-17 02:49:51
不过，这与最初的问题无关。OP 想知道对 DOM 元素的引用是否是可见 DOM 的一部分。
2021-03-21 02:49:51
我明白了。我只是在我的评论中建议其他答案更好，更适合该问题。
2021-03-23 02:49:51

我更喜欢使用该node.isConnected属性（访问 MDN）。

注意：如果元素也附加到 ShadowRoot，这将返回 true，这可能不是每个人都想要的行为。

例子：

const element = document.createElement('div');
console.log(element.isConnected); // Returns false
document.body.append(element);
console.log(element.isConnected); // Returns true
最简单的解决方案...比 document.body.contains 更简单。
2021-03-12 02:49:51
其它你可能感兴趣的问题
上一篇如何停止 Javascript forEach？ 下一篇如何使用 JavaScript 源映射（.map 文件）？