仅使用javascript检查由javascript创建的元素是不是存在[重复]

Posted 2023-03-24

【中文标题】仅使用javascript检查由javascript创建的元素是不是存在[重复]

【英文标题】：Checking if an element created by javascript exists using only javascript [duplicate]仅使用javascript检查由javascript创建的元素是否存在[重复]

【发布时间】：2014-11-22 20:22:44

【问题描述】：

这个问题很简单。是否有仅 javascript（没有 jQuery/其他库请）检查通过 javascript 创建的元素是否存在的方法？

例如，如果我这样做：

var foo=document.createElement("div");
document.getElementById("bar").appendChild(foo);

有没有办法检查 foo 是否已经存在？

【问题讨论】：

如果你不给它一个 id 或唯一的类，没有。

***.com/questions/5629684/…

什么是不存在的元素？这是一个哲学问题吗？

@AvinashBabu，这不是我想要的。然而， infantDev 的回答确实为我提供了我需要的东西。

什么意思，检查 foo 是否已经存在？变量foo 包含您刚刚创建的全新元素；在调用document.createElement 之前它不可能已经存在，因为document.createElement 总是创建一个新元素。

【参考方案1】：

foo 不是一个元素，它是一个变量，其值为一个元素。有不同的方式来解释您的问题。

变量foo的值是DOM元素吗？

如果你想检查变量foo是否存在并且有一个元素作为它的值，你可以说

foo && typeof foo === 'object' && foo.nodeType

或类似的东西。这将检查元素是否是任何类型的Node。要检查元素，请使用foo.nodeType === Node.ELEMENT_NODE。

是 DOM 中的特定 html 元素吗？

如果要检查变量foo 中保存的元素是否在DOM 中，而不是已创建但尚未插入，则：

foo.baseURI

因为 baseURI 仅在 DOM 插入时设置。您可能认为可以检查 parentNode，它在插入 DOM 之前也不会设置，但未插入元素的子元素（如果有）将报告 parentNode，附加到文档片段的元素也是如此。

另一种选择是使用Node#contains：

document.body.contains(foo)

本质上与扫描整个 DOM 中的元素相同：

Array.prototype.some.call(document.querySelector('*'), function(elt) 
    return elt === foo;
)

无论如何，这一切似乎都毫无意义，因为据我所知，如果您持有对 DOM 元素的引用，并且它不是 DOM 中的 not，那么它 在 DOM 中。

我要插入这个的地方已经有一个元素了吗？

如果你知道元素要去哪里，在这种情况下作为bar 的子元素，这足以让你相信“元素已经存在”，你可以通过以下方式轻松检查：

document.getElementById("bar").children.length > 0

是否已有具有此 ID 的元素？

正如其他评论者和响应者所指出的，如果您已安排为其提供一些唯一可识别的特征（很可能是一个 id），那么您显然可以在 DOM 中找到一个元素。

我希望很明显，元素 ID 与恰好持有对该元素的引用的任何 JavaScript 变量的名称完全分开。确实，元素在其 ID 或名称属性下可在根（窗口）对象上使用，最好不要使用此功能。

该元素是在源 HTML 中，还是由 JavaScript 创建的？

从您问题的措辞看来，您可能可能对元素是否由 JS 创建而不是源自源 HTML 感兴趣。我没有办法检测到这一点。如果您打算这样做，请按如下方式覆盖 document.createElement：

document.createElement = (function() 
    var old = document.createElement;
    return function(tagName) 
        var elt = old.call(document, tagName);
        elt.I_CREATED_THIS = true;
        return elt;
    ;
());

> document.body.I_CREATED_THIS
undefined
> elt = document.createElement('span');
> elt.I_CREATED_THIS
true

【讨论】：

I hope it's obvious that element ID is completely separate from the name of any JavaScript variables which happen to be holding references to that element. -- 实际上 ID 确实成为全局变量，请参阅 HTML5 规范的 section 7.2.4。很难说它是否与 OP 的问题有关，因为现在的措辞是无稽之谈。

@DaggNabbit 感谢您提醒我这一点。我会调整我的答案。

【参考方案2】：

您可以简单地通过 id 获取元素并查看它是否不为空。

var foo=document.createElement("div");
document.getElementById("bar").appendChild(foo);
foo.setAttribute("id","foo");
var ele = document.getElementById("foo");
if(ele !== null) alert("Hi");

【讨论】：

这个答案引入了 OP 没有做出的假设，即元素有一个 ID。