如何检查可见 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 中是否存在元素? 的相关文章

  • 直接将函数与匿名函数传递给 then Promise 回调

    我试图理解这三个选项之间的区别 then myCallback then myCallback then gt myCallback The myCallback函数不返回任何内容 仅用于其副作用 因此我不需要它将任何内容传递回承诺链 我不
  • 在文件之间共享变量(没有全局变量)

    据我了解 使用创建的变量let在 Javascript 中不能是全局的 我thought这意味着该变量仅存在于该特定文件中 然而 当我做一个简单 人为的例子时 A js let a 5 B js console log a 索引 html
  • 在当前元素的 onchange 上发送 $(this)

    我有这个html
  • 在一段时间内切换(或闪烁)表中的特定单元格

    我已经在 Html 中创建了一个表格 我想让一个特定的单元格闪烁 打开和关闭 您能否让我知道是否可以使用 javascript h4 Two rows and three columns h4 table border 1 width 10
  • Safari 在后台选项卡中延迟 setInterval / setTimeout(间隔 > 1000ms)

    请注意 当页面位于后台选项卡中时 Safari 10 0 3 会延迟我的代码 var interval 2000 var scriptTime new Date getTime function addTime scriptTime int
  • Node JS 如何将图像和请求数据一起 POST 到另一个服务器/api

    我正在尝试将图像从 Node JS 应用程序发布到另一个 REST API 我在 Mongo DB 中有图像 作为二进制数组数据 由 Node JS 读取 然后应该发布到另一个 API 我面临的问题是如何将请求数据与图像一起发送 我有这个原
  • 使用 window.print 内容将网页下载为 pdf

    我想要一个链接 当单击该链接时 会自动开始下载网页的可打印版本 我正在使用Moodle 我想要的内容是完全相同的如果我使用 ctrl p 下载页面并保存为 pdf 或使用 a href Download web page a 我正是想要该内
  • Ace编辑器使用javascript触发事件

    有没有类似的东西 editor getSession trigger change 我想要这个的原因是因为编辑器进出新的 所以当它返回视图时我需要它做正常的 更改 事情 但我不想等待用户输入 目前我有 editor getSession o
  • 如何将数据框列名称插入方程 R 中? [复制]

    这个问题在这里已经有答案了 我试图通过引用数据框列名称并将其插入方程而不是直接调用名称来使一段代码更加灵活 尽管我必须直接插入字段名称 但以下示例有效 require e1071 class c 0 25 0 34 0 55 field1
  • AJV自定义关键字验证

    我正在使用 AJV 库来验证我的 JSON 架构 我希望能够验证Startdate成为一个字符串 如果不是字符串 则应将其转换为N A 目前 它仅转换undefined to N A 但是 在这些情况下 它不会按预期工作 null gt 空
  • Javascript 子字符串方法帮助

    长话短说 我正在开发一个 Web 应用程序并在其中使用 AJAX 我试图禁用点击时链接的默认操作 将哈希值附加到链接 然后从网址中删除 我遇到的问题是 虽然哈希值被相应地附加 但子字符串方法并没有提取 而是提取了它后面的字母 这是我的代码
  • int i 与 int index 等哪个更好? [复制]

    这个问题在这里已经有答案了 可能的重复 名为 i 的变量是不可接受的吗 https stackoverflow com questions 130775 is a variable named i unacceptable 循环变量的理想变
  • 使用 arrayRemove() 从 firestore 9 数组中删除对象?

    我正在尝试从 firestore 中的数组中删除一个对象 但遇到了障碍 执行删除的要求或参考是什么 对象中的一个键值是否足以执行删除操作 或者该对象是否应该与要删除的对象相同 const deleteWeek async gt const
  • 动态创建多个上传文件

    我想知道是否有人知道动态创建上传表单的最佳方法 这就是我想要实现的目标 下面显示的代码允许一次上传 我想要一个按钮 按下该按钮后 应添加另一种形式用于文件上传 因此 如果我想上传 假设有 7 个文件 我想按按钮 7 次来创建这些上传表单 每
  • 查找数组中是否有任何项目符合条件

    我是 JavaScript 新手 现在 我有一个包含多个对象的数组 因此 我想迭代它 如果任何对象与条件匹配 那么我想返回一个值并停止该循环 我的 obj 数组就像 var obj type numberOfQuestions techno
  • 在 JS 中的浏览器中输入 url 时,偏移哈希标签链接以调整固定标头

    我希望创建一个页面 允许哈希标签跳转到页面的某些内容 e g http example com page1 http example com page1是一个普通页面 http example com page1 info http exa
  • 我想从 Cakefile 运行 d3

    我想从命令行执行一些 d3 代码 最初我只是尝试了类似的方法 task data Build some data with d3 gt d3 require lib d3 v2 console log d3 version d3 versi
  • IFrame Resizer 未调整大小

    我正在这个页面上工作 http factor1hosting com dnaz wordpress certifications http factor1hosting com dnaz wordpress certifications 我
  • 在dynamodb中使用batchWriteItem

    我的 dynamo 数据库中有两个表 一个是候选表 另一个是用户表我想在 dynamo 数据库中使用 batchWriteItem 以便在表中添加数据 我格式化的查询如下 var user userid usrid role candida
  • 在 Firefox 中单击桌面通知时如何将焦点移至选项卡?

    我正在一个网站中实现桌面通知 该网站会在新消息到达时显示通知 我希望当用户单击通知时 打开网站的浏览器选项卡能够获得焦点 我可以使用以下代码在 Chrome 中实现此功能 var n new Notification Title body

随机推荐