在 JavaScript 中如何检查 html 元素是不是存在？

Posted 2023-03-29

【中文标题】在 JavaScript 中如何检查 html 元素是不是存在？

【英文标题】：In JavaScript how to check html element existing or not?在 JavaScript 中如何检查 html 元素是否存在？

【发布时间】：2013-10-29 09:58:31

【问题描述】：

我想检查页面中是否存在 html 元素。

var e = document.getElementById("test-node");
if(e == null)

 // do something

但上面的代码不起作用。如何检查此元素是否存在？任何建议将不胜感激。

【问题讨论】：

它应该可以工作。你能用小提琴演示一下这个问题吗？

你可以用jQuery做的很简单，这个库是你项目中的一个选项吗？

只为这个测试使用整个jquery？ LMAO

@Barmar ：这个元素是一个下拉框。它有多种选项可供选择。只有现有用户才能看到下拉框。对于新用户，他们看不到它。当用户登录时，我想根据选择的这个选项做一些设置。对于新用户，我还需要做一些设置。为了识别新用户，我使用了这个下拉框的存在。

您如何防止新用户看到它？如果你只是用 CSS 隐藏它，元素仍然存在。

【参考方案1】：

这将起作用：

if (document.getElementById("test-node")) 

   // exists

【参考方案2】：

你可以直接在if条件里面查看。

试试这个代码

if(document.getElementById("test-node"))

  // exists

else

//doesnot exists

提琴手：http://jsfiddle.net/codingsolver/rPHTb/

【讨论】：

它返回null，而不是undefined。

不工作？看看这个提琴手。它正在工作：jsfiddle.net/codingsolver/rPHTb

@Su123。没问题。感谢+1。不客气。快乐编码:-)

【参考方案3】：

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

document.contains(someReferenceToADomElement);

【参考方案4】：

试试这个

if (the_object.hasOwnProperty("ElementName"))  
    
   //some action

  

【参考方案5】：

HTML

<div id="test"></div>

JS

var e = document.getElementById('test');
if(e)
    alert("we have the test div");
 else 
    alert("we don't have the test div");


var e2 = document.getElementById('test2');
if(e2)
    alert("we have the test2 div");
 else 
    alert("we don't have the test2 div");

http://jsfiddle.net/7tgvb/1/

【讨论】：

奇怪，对我有用。 Fez Vrasta 的解决方案也应该有效

【参考方案6】：

试试这个。

var e = document.getElementById("test-node");
if(e)

  // do something

【讨论】：

同样的问题。如果元素不存在，它应该转到其他部分对吗？但这不会同时发生