个人中心
gpt4 book ai didi

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

转载 作者：IT老高 更新时间：2023-10-28 11:03:23 34 4
gpt4 key购买 nike

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

我已经设置了一个 live demo 供引用。我也会在这里打印代码:

<!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 变量会有这样的行为。

最佳答案

似乎有些人在这里登陆，只是想知道一个元素是否存在(与最初的问题有点不同)。

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

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

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

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

此外，您还可以使用现有的许多其他方法来查找元素，例如(所有以 document 为生的):

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

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

为了实际确定元素是否作为可见 DOM 的一部分存在(就像最初提出的问题一样)，Csuwldcat provides a better solution than rolling your own (因为这个答案曾经包含)。也就是说，要使用 the contains() DOM 元素上的方法。

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

document.body.contains(someReferenceToADomElement);

关于javascript - 如何检查可见 DOM 中是否存在元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5629684/

34 4 0
文章推荐： mongodb - 在 node.js 和 mongodb 中创建注册和登录表单
文章推荐： javascript - JavaScript 中的 "Submit is not a function"错误
文章推荐： mongodb - 如何使用多个 ip 地址设置 mongod.conf bind_ip
文章推荐： jQuery .html() 与 .append()
IT老高
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com